1. まとめトップ
  2. デザイン・アート

あのWebサービスに隠されたデザイン設計の秘密

ネット上には様々なサイトがありますが、サイトのデザインも一つ一つ違います。大手のサイトはデザインする時、どういったことに気をつけているのか?最近、デザイナーさんのインタビュー記事を見つけて気になって調べてみました。それぞれの社風が生み出す、デザイン設計は参考にできるかも。

更新日: 2012年08月10日

raich100さん

  • このまとめをはてなブックマークに追加
487 お気に入り 76228 view
お気に入り追加

ユーザーの環境を想定してデザインする『クックパッド』

レシピ検索サイトの大手「クックパッド」。料理しているユーザーを想定したデザインを心がけているようです。

http://cookpad.com/

ユーザーが料理を作っている具体的なシチュエーションを想定してデザインする

「台所でレシピを印刷して壁に貼ってるのか?それとも台所にPCを置いてるのか?」など、シチュエーションを想定することで、作るべきデザインが見えてくるとのこと。

「かんたんもう一品検索」は、訪問中での気づきから生まれたサービス

cookpadを使っているユーザーの訪問中に「主菜はある程度決めているが、つけあわせの副菜選びに苦労している」という事実から作られたサービスらしい。

俯瞰して見るために薄めで画面を見る

普通に見ていると、自分の好きなものとか気になってるものが目に飛び込んでくるので、俯瞰してみるために薄目で画面をみてみるのも一つの手みたいですね。

細かい部分にも気を抜かない『Sleipnir』

ヘビーなネットユーザーにも支持がある国産のタブブラウザ。細かい所まで計算されているデザインは、一度使うと癖になりますね。

http://www.fenrir-inc.com/jp/sleipnir/

Webページの読み込みを、早く感じさせるプログレスバーを実装

Webページを読むこむ際に出てくる、プログレスバーを、最初はスピーディに伸ばし、その後縞々のアニメーションすることで心理的に遅く感じないように設計されているらしい!

Safariの「タブが切り替えにくい」という欠点を突いて、サクサクと小気味よく操作できることにフォーカスした

Sleipnirのアプリを作る上で、Safariの弱点をついた戦略を練っていた!

ユーザーがすぐ馴染んでくれるように丸いアイコンにしている

Macに関しては、デスクトップ型のブラウザのアイコンは基本的に丸なので、統一してブラウザだと認識しやすくしているとのこと。

昭和世代にしか通じない!という意見から保存アイコンは箱のシンボルに

フロッピーこそがベストな”保存”のシンボルだと主張する人もいたそうですが、結果的にアンチフロッピー派の「箱のシンボル」が採用された。

人間っぽさを加える『Wantedly』

ソーシャルリクルーティングサービスとして注目されている「Wantedly」。社長自らデザインした初期のUIには失敗もあったようです…。

https://www.wantedly.com/

旧デザインは「なんとなく良いと思うから…」という理由で作っていた!

2012年7月にリニューアルしたWantedly。それまでのデザインは全体的に「筋が通っていなかった」と、社長自身がおっしゃってます。

Facebookで働いていたときに知った「動線設計」に注力している

CEOの仲さんが、Facebookにいた時に学んだ視点だそうです。

テクノロジーや、UI/UXの魅力を人間っぽくするのがUIデザイン

機械は機械として複雑でかっこいいんだけど、ユーザーに使ってもらうにはそれをシンプルにしなければいけないとのこと。

使いやすさに拘った『mixi公式アプリ』

SNSの大手「ミクシィー」。デザインを決める時は、デザイナー以外の意見も取り入れて議論しているようです。

http://mixi.jp/

特に注力したのは、片手でも操作しやすい「投稿」のUI

mixi公式アプリのUIの拘り。とにかく、投稿ボタンの位置にこだわって、エンジニアとデザイナーの間で長い議論になったらしい。

使用する色のカラーコード、罫線の太さ、書体に至るまで細かい利用規則を作った

デザイナーだけでなく、エンジニアにも守ってもらう基本的なレギュレーションを作成したとのこと。

mixiでは全員が納得するまで議論を重ねるのが基本

デザイナーだけでなく全員が意図を共有し、自分たちにできることをそれぞれが持ち寄って、納得するまで議論しているとのこと。

1





このまとめへのコメント3

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

1

raich100さん

ライチに憧れてはや◯◯年。。。
未だ口にしておらず。。

このまとめに参加する



  • 話題の動画をまとめよう