デザインの構築

2016-10-13 23:51

topimageデザインに関して。
←の画像は、新しいデザインを考えています。

デザインの種類としてはレスポンシブデザインを目指します。
パソコンで見る分は、ブラウザの大きさが変化するので、そこで考えなくてはいけません。
しかし、タブレットやスマホで表示する場合、そこはやはり別のデザインを用意する必要があると考えます。

必要なプログラムとしては、デバイスをきっちり判断することのできるプログラムが欲しいところです。

もちろん新しいデザインはワードプレス上で展開しますし、デザインのテーマはいつも通り「サイバー」的な感じを出したいと思っています。

まずはサイトの顔であるトップページの構成から入っていきます。
画像はイラストレーターで簡単に作ったものですが、この時点で、数字はきっちりとしたものにしておかないといけません。
でないと、あとから計算が面倒なものになってしまいます。

「ここのブロックの縦横の大きさはどのくらい？」
「このブロックとこのブロックの空きはどのくらい？」
で、実際に調整したら予定よりも大きくはみ出してしまったりして、またデザインのし直し…なんてことにもなりかねません。

図の中身を言うと…
まず、背景に関しては、今まで黒をベースとしていましたが、サイバーだからといって黒ということはないでしょう。なので、今回は白をベースにしようかと思います。
ヘッダーブロックはそれほど大きくなくていいかなと。背景色は黒の70％の透過で、文字は白で。

図の中では下の方のブロックに、「縦書きにしたい」と書いたのだけど、やはり、サイトの性質上、それは難しいだろうと思う。
今回のこれは、解放区だけでなく、いろんなサイトに対応した形にするのが最大の目的なので、トップページは縦書きで、記事の中に入ったら横書き…なんてことになるとおかしくなってしまう。
やはり、さらにこの解放区で使うとなると、プログラムのコードを表示していたりするので、縦書きは非常にまずいｗ

とにかく、全体の構図ができあがったら、ベースになる文章の枠。フレームのデザインを考えなくてはいけない。