logo

back DESIGN

なんとなく気持ちのいいデザイン

2013年08月10日

ポートフォリオサイトをブログにリニューアルして半月ほど立ちましたが、今回はちょっと照れくさくて記事にしていなかった「工夫してみたデザイン」について書きたいと思います。

コンセプトは「見ていてイライラしないようなデザイン」

これに関しては初回の記事でも少し話題にあげていたのですが、このブログにおいて一番実現したかったのはユーザーが見ていてイライラしないこと。これを実現するために、実は文字のサイズやボタンの配置のほかにもなんとなく気持ちのいいデザインに近づけるため少し工夫していました。

全体的に白銀比で構築してみた

美しいと言われる比率で有名なのは黄金比ですが、黄金比って海外ではよく取り上げられるものの結構比率がキツくてあんまり好きになれないのですよね。ぼくがそう思ってる時点でこういった比率は取り入れる気はなかったのですが、唯一白銀比がDVDのパッケージや漫画で近いものが使われていたり、いつも使うA5やA4などの普通紙もこの比率でできているらしく、logの画像縦横比で取り入れてみたところすごくいい感じでハマったのでそれ以来ある程度白銀比に沿うようなデザインを心がけるようになりました。

だいたい白銀比。画像サイズ、パネルサイズ、ナビバーの比率など

だいたい白銀比。画像サイズ、パネルサイズ、ナビバーの比率など

あんまり盲目的にこういった比率に頼るのはよくないと言われると思いますが、全体の統一感的な意味でも白銀比が美しい美しくないと議論する以前にこういった比率がもたらす「全体としての比率の安定感」がなんとなく気持ちのいいデザインを実現できるのではないかなと思っています。ちなみに白銀比をパパっと知りたいときはこのサイトが便利。 余談ですが日本において美しいとされる比率は黄金比よりも白銀比で、日本の名画や建築、華道などは白銀比で作られたものが多いらしいです。

一番見て欲しいコンテンツだけにトランジション

このサイトのトップページなどで記事を出すときにふぁふぁふぁっとページのロードが終わったあとにわざわざこのようなエフェクトが発生するようにしてあるのですが、これはただ単にカッコいいとかそういう目的でつけたのではなく「ページにおいて一番注目してほしいコンテンツを目立たせる」目的において使用しました。実は記事詳細もアイキャッチ画像だけ遅れて表示されるようになっています。 「なにを見ればいいか考える前に無意識に誘導する」ことを目標としました。

動くもの(仲間はずれ)って目立つんです

動くもの(仲間はずれ)って目立つんです

基本となる文字サイズは13px

一番見やすい基本文字サイズといえば12pxがあげられると思うのですが、いまのPCの解像度事情的にこれはちょっと古いかなと思っていて、少し大きめの13pxで統一しました。等級のリズムとしては9ー11ー13ー15ー18ー21pxみたいな感じです。ブログの記事の文字サイズに関しては15pxで、サイドバーもなく1カラムで文字しかないデザインで13pxは少し小さいかなと思ったので少し大きめにしています。

必要なときに適切なボタン

このサイトにはボタンがいくつかあって、前のページに戻るボタンであったり、ページの上部に戻るボタン、ページ送りのボタンなどありますが、必要なときにそのボタンがあり、適切な位置、適切なシェイプにすることを意識しました。

シェイプがまったく同じボタン

シェイプがまったく同じボタン

この画像の例では、一番下にある「トップへ戻る」ボタンを押した人に対して次に提示するアクションとして「Backボタン」を全く同じシェイプのボタンとして簡単に認識させることを目標にし、記事一覧へうまく戻ってもらう一連の流れとしてうまく動くんじゃないかなと思いこのような形にしてみました。

さいごに

見えないようなところでちょっとだけこだわったデザインについて納得感ありげに解説してみましたが、やはりデザインはある程度のロジカルさは必要でありつつも、最終的には見た人がどう感じるかだけがすべてなのであんまり語っても仕方ないですかね・・・w どういう形であれぼくが目指したいデザインをその通りに感じてもらえるような、そういう感性の高いデザイナーを目指したいです。

シェアしてね

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Strategist / UI Designer.

PORTFOLIO

copyrights(c) Keisuke Tsukayoshi.