WEBデザイナーセミナー

第13回 9月16日(日曜日)



非常にレイアウトについていいビデオを見つけましたので、それについて私のなんちゃって英語力で解説します。



この中にあなたが見えることができる四角形がいくつあるでしょう。

このスクエアについては、若干話が複雑なのでビデオで解説します。

質問は いくつ四角が見えるか、ですが、それはいくつ四角があるかとは違うわけです。

それは大きさによっても違いますし、これはデザインの練習になります。

反転したり、してレイアウトの配置を考えて見ましょう。

アニメーションにしましたので、いくつの四角があるか数えてみます。

40個あることがわかりましたか?

イラストレーターや鉛筆で、このようなレイアウトについて考えます。

グレイとホワイトのラインが出会う場所によっても違ってきます。

白い四角をちょっと上にずらしてやることで飛び出します。

四角でくぎってやることで、さらに増えます。

レイアウトはこのようにするのです。


ファンタムスクエア(左右に広がりを持つスクエアのこと)

スクエアがAlignment(一直線に並ぶこと)

縦に並ぶことでまた連続性演出できます。

また 関係性も目は意識するのが Alignmentです。

横に連続的に並ぶことで注目されやすくなることでもこの効果はわかります。

そのレイアウトの効果を確認してみましょう。

それはバランスです。

スクエアでくぎることでレイアウトはしやすくなるのです。

白い花の隣に同じくらいの分量の黒い空間があることで、存在感が増します。






ちなみにファントムとは…↓

こんな風に横に飛び出していることを言うらしいです。

ホームーページを構成するにあたって、写真を集めてレイアウトを考えます。



隣のキムチ屋さんのホームーページのデザインを写真を眺めながらレイアウトとデザインをイラストレーターでやってみましょう。
紙に書いて打ち合わせしたりします。

そのレイアウトを見ながら、それに近い形でhtmlで実現できるかも考えてみます。

ちなみにgoogle site では最初にレイアウトがすでに作られたものがありますので、そこに何をどのようにレイアウトしたら効果的かも考えてみましょう。




携帯電話の写真をモバイルでグーグルプラスで管理ると、キレイに一生保存できそうですね。


世界的写真サイト webshots
Comments