プログラマから見たデザインのお話
お久しぶりです。
仕事探しは応募したりしながらも遅々としていますが、
それでも、昨日よりは今日、今日よりは明日、の精神でコツコツつついています。
近況と、前置き
最近は、WEBのデザイナー職にも応募を掛けてみることにしました。
コードをまず手につけるというところにおいては、
CSSとHTMLの世界でも早々変わりはないのかな、位のゆるい認識です。
最も、現場に入ればJavascriptのフレームワークがあり、
Thymeleafなどのテンプレートエンジンもありますので、一筋縄では無いですが。
しかし、そんな中でもデザイン面の知識を整理してみるのは悪いことではないです。
デザイン一つ取ったとしても、最終的に実装するのはこちら側。
ある程度、抑えるべきところを抑えたデザインにしてくれないと、
工数は指数関数的に膨れ上がります。
なので、まずは一つ知識を抑えてみよう、と。
今手持ちにある知識を軽く棚卸しして、概要と共に一度整理すると同時に、
「ここを抑えてほしい」という、勘所をきちんと明らかにするのが目的です。
Zレイアウト、Nレイアウト
ディスプレイ内の人間の目線の動きをシミュレーションしたとき、
原則として横書きの文章を見る時はアルファベットのZを描くように目が動きます。
大多数のサイトで左上にロゴが、次にメニューが上に来るのはこれを踏まえてです。
人間工学的に自然な形、と言ったところだと思います。
これを踏まえたレイアウトが、Zレイアウトと名前付けされています。
逆に、縦書きの文章を読む場合は、N字のように目は動きます。
縦書きの小説サイトなら、左上にロゴやマークが来る方がベターでしょう。
最も、サイト本体と考えた場合は大概が横書きが軸である以上、
Zレイアウトが使われることが9割近いと思います。
聖杯レイアウト
聖杯、Holy Grailレイアウトと呼ばれるレイアウトは、
ヘッダーがあってナビゲーション等のサイドメニューが左右に配されてあり、
画面下にフッターがある、といった形のレイアウト。
Webの黎明期から使われてきている伝統的なレイアウトであり、
同時にCSSにおいては古典的な問題としても扱われてきました。
こことかが詳しいのではないでしょうか。
https://hashrock.github.io/solved-by-flexbox-ja/demos/holy-grail/
抑えるべきデザインの潮流
さて、レイアウトについてはまずは上の2つを抑えた上で、
最近のデザインについて触れていこうと思います。
最近では、アイコンはわかりやすく共通認識を固め、無駄を排してシンプルに。
その上で出来得る限りわかりやすいデザインで、というのが肝になっています。
よく化粧品などのサイトに有るような華美なデザインはよく目を引きますが、
根幹としてサイトの機能性を損なうのでは本末転倒です。
そのため、骨子としてきちんと抑えるべきはできる限りシンプルに、
わかりやすいデザインで固めることが必要になってきます。
PCのホームページをモバイルで表示することも多くなってきました。
PCサイトと言えども、
モバイルに対する意識をきちんと持たないと閲覧においては厳しくなってきています。
この、PC-モバイル端末間の対応において、デザイン側で意識しなればならないのは、
「レイアウトの再利用性」、「共通化」の二点です。
ここを抑えずに、コロコロと要素を変えてしまうと実装で地獄になります。
そして、この2つを両立させるため、
最近ではフラットデザイン2.0や、
マテリアルデザインと呼ばれる手法を使うのが主流です。
マテリアルデザイン
マテリアルデザインとはなにか、と聞かれた場合は、
真っ先に浮かぶのは四角い付箋です。
紙とインクのイメージで、オブジェクトの重なりでものを表現していく手法です。
要素を重ねたり、サイズを変えたりしながら、
デザイン面で表現したいものを表現していくのがマテリアルデザインの骨子でしょう。
細かい制約は多々ありますが、こざっぱり、かつシンプルに考えるなら。
「机の上の付箋で表現できないレイアウトをしない」くらいになるでしょうか。
裏を返せば、これできちんと表現ができるなら、
再利用と共通化はそう難しいことではないと思います。
詳細をガッツリ突き詰めれば、色々出てきますが。
まずはここが軸ではないかなという認識です。
フラットデザイン2.0
フラットデザインとはなにか、と聞かれた場合は、
真っ先に浮かぶのは白いご飯であり、乾パンです。
変な味付けのない、何回見ても飽きないシンプルなレイアウトにする手法です。
機能性を損なわないレベルで、最低限のナビゲーションやアクションを加えつつ、
できる限りこざっぱりとまとめ上げて、
リッチな要素を引き立てるところは引き立てる。
1.0との違いは、1.0は高級なリッチな要素さえも抜いて、
できる限りフラットに作ろうとするところでしょうか。こう、のっぺりとした感じに。
個人的には、2.0のほうが比較的わかりやすく、
かつデザイン性もあると思うので、こっちが好みです。
こっちの場合は、
「表に出す要素数をできる限り絞り、
必要なものについてはアクションによってさらなる動きを見せる」
くらいのゆるい認識で見ています。
アンドロイドのスマートフォンを使うとわかると思いますが、
右下にフロートボタンがあって、
それをタッチすると他のメニューのボタンが出てくることも多いですよね。
アレも一つのフラットデザインなのだと思います。
今のトレンドとして見たときに
今のところは2つ程度。
いろいろなデザインが今は浮かんでは消えてを繰り返しています。
しかし、まずは大筋の幹となるデザインの流れはこの2つという認識です。
ここを抑えておけば、まずはいいのかなというところです。
詳細は、追って調べるのもいいと思いますが、
最低限この2つを押さえれば、実装側にも優しい世界が広がるのかなと思います。
