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

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

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

はじめに復習で

UIデザインとは

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

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

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

UIデザイン繋がりでつい最近Google Chromeがリリース10周年を迎えまして、リリース記念に大幅にUIデザインが更新されてました。丸みの帯びたデザインになり、個人的に感じたのは白く薄くなって柔らかく、主張の激しくないデザインとなったと感じました。（初期設定のテーマ）。
売上100万円？？！！最安49800円のLINEスタンプ製作！！

 

やっと本題です。(ﾟｰﾟ;

Webサイト基本的な構造

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

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

デザインの流れ

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

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

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

■ 文字

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

■ アイコン

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

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

■ 外箱（ボタン領域のデザイン）

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

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

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

以上です。