ライセススタッフが書くブログ。

Webデザインに役立つデザイン集 ボタン編①

| Web制作のこと
Webデザインに役立つデザイン集 ボタン編①

こんにちは。webデザイナーの鈴木です。

いきなりですが、今年後期の目標はUIデザインに力を入れることです。
様々なシチュエーションに応じてデザイン設計行っていこうと考えています。
UIデザインとは前から知ってはいたのですが、いざ始めると意外とわかったない部分が浮き彫りになり、再度復習…φ(^∇^ ) メモメモ

「良いUIデザインを作るにはどうしたらいいのか」と考え際に、普段から閲覧しているサイトに「これはいい!」と感じたパーツやレイアウトを分析してみました。

 

はじめに復習で

UIデザインとは

UIとは「ユーザーインターフェース」(user interface)の略称です。
意味:直訳しますとユーザーは利用者、インターフェースは接点、両者間の境界面。
つまり人間とコンピューターの間での情報をやりとりするためのデザインを示してます。
例えば、WEBサイト内でいうとボタンのデザイン・メニューの開き方などなど…PCで操作する際に使うキーボード・マウスもハードウェアにおけるUIになります。

UIデザインとは

ユーザーがサイトに訪れた際に快適に閲覧やサービスを利用できる様に設計するのがUIデザインです。

達成目標のイメージがこんな感じですね
Lv5:スムーズに使えるようする。多少考えてしまうがサービス利用に関して影響ないレベル。
Lv??:ユーザーが考えなくても操作できる(最終目標)


UIデザイン繋がりでつい最近Google Chromeがリリース10周年を迎えまして、リリース記念に大幅にUIデザインが更新されてました。丸みの帯びたデザインになり、個人的に感じたのは白く薄くなって柔らかく、主張の激しくないデザインとなったと感じました。(初期設定のテーマ)。

 

やっと本題です。(゚ー゚;

Webサイト基本的な構造

Webサイト基本的な構造が大体以下画像のようなっています。様々なパーツをシチュエーションに合わせて設計していきます。

Webの基本的な構造

今回は【ボタンリンク】について分析してみました。
【ボタンリンク】の部分は人がアクションを起こす際に使われる重要な部分ですのでちゃんと設計していく必要となってきます。

 

デザインの流れ

スキュアモーフィックデザインからフラットデザインやマテリアルデザインが主流になった今、文字を四角いアウトラインで囲っただけのシンプルなデザイン表現が浸透して来ましたが、やはり一定のリテラシーは必要となってきます。

 

様々なサイトから集めた「一覧へ」のボタン

一覧ボタンのデザイン見本

上記画像は様々なサイトから集めた「一覧へ」のボタンです。
ほとんどのボタンのデザイン構成は
「アイコン+文字+外箱(ないのもあるが)

■ 文字

フォントや言葉遣いの違いで与える印象が変わってきます。
「一覧」「〇〇〇〇一覧」「一覧を見る」「MORE」「VIEW ALL」「Read more」など

■ アイコン

矢印タイプのボタンデザイン

最近はこのタイプをよく見かけますね。

矢印

馴染みのあるデザインは矢印と三角のアイコンですね。

■ 外箱(ボタン領域のデザイン)

別の表現で内部リンクを表現しているボタン

アイコンを使わないデザインの中で、一番右のハンバーガーメニューのアイコンを使っている一覧ボタンのデザインはWeb慣れしている方でしたらわかりやすいと感じました。クリックした後になにがあるのかがイメージしやすいと感じました。
真ん中と右のボタンも捲ったら又は下にまだあるとイメージさせられるデザインになっているので、アイコンとは違ったデザインの表現がでるのでサイトの雰囲気を統一する際には良い参考になると思いました。

アイコンを前後どちらに配置するのも受ける印象が変わります。
今回紹介したのは「一覧」ボタンですので、デザインのバリエーションはあまり多くないと感じますが、
これらのボタンはcssで構築可能なという縛りで集めたもになります。
アイコンにはまだまだまとめたい部分がありますので、また次回のブログにまとめます。

 

まだ模索している段階ですので、更新頻度は高くないですが今後も参考集めをやって行きたいと考えています。
そして、今後のWEBデザインの参考に繋がるものにしたいと思います。

 

以上です。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る