ポートフォリオサイト制作日記 Vol.2 デザイン編

Diary

こんにちは、ゆきたです。

コツコツと進めているポートフォリオサイトの制作日記の2回目です。前回はサイトの内容と工程の大まかな計画を立てるところまでやりました。今回はデザイン編です。具体的には私の屋号のロゴマークとロゴタイプ、おまけで名刺(これは関係ないけどあとで実績に入れよう)、そしてサイトのデザインを作りました。

ちなみにロゴと名刺はIllustratorで、サイトのデザインはSketchでやってみてます。

 

ロゴデザイン/Illustrator

まずはロゴですが、私の屋号が「Creatase」なので、これのロゴタイプとシンボルマークを作っていきます。ロゴにも色々ありますが、私はシンプルなものが好きなのであまりごちゃごちゃしないように気をつけながら作り込んでいきます。

本来ならロゴや社名(屋号)のもつ意味合いや、字面、形状の共通点などを洗い出した上で何十パターン、多いときは何百パターンと案を作っていくものなのですが、今回はそこまで時間をかけずにささっとやってしまいました。

で、できたシンボルマークがこれ

「Creatase」って一応、酵素の名前なので生き物感を出しています。あと真ん中に三角形見えますか?見える人には見える、見えない人には見えない。クリエイティブな仕事っていつも0→1ですよね。って意味を込めてます。ちなみに下のやつがさりげに「C」ですね。サイト作るのでファビコン用にこんなのも用意してみました。

上のやつだとファビコンにするとちっちゃすぎて潰れるので…。

あとはロゴタイプですが、このブログのタイトル考えた時に作ったものにちょっとだけ手を入れました。

どこが変わったって?色ですよ、色!

でシンボルマークとロゴタイプを組み合わせるとこうなります。

これを使って名刺とかサイトとか作っていきます。(名刺はこの記事ではやりません…)

 

サイトデザイン/Sketch

それではさっき作ったロゴや手持ちの適当な写真なんかを使ってサイトのデザインを考えていきます。色々やり方があると思うんですが、今回は作ることは決まっているし、作るのは私だし、私のサイトなので、複数案考えたりせず、テンプレとかもすっ飛ばしていきなり完成形に近いものを作ってみました。(普通はコンペとか、複数案作ったりする都合で一案あたりにそこまで時間をかけられないので、画像を入れたりしない場合もあります。ないか。。)

前回まとめたサイトに欲しい内容は以下の通り

  • 1ページで完結
  • ロゴマーク
  • 自己紹介:About
  • 実績:Works
  • ブログ:Blog
  • お問い合わせ:Contact

書き漏らしてますが、もちろんレスポンシブ対応です。

これにしたがって、上から順番にデザインを作っていきました。この段階で、多少HTMLやCSSを書くときのことを頭に入れつつ、「これは多分できるよね。。」とか言いながら作っていっています。

あと、デザインの段階でここまでやるかどうかは正直微妙何ですが、タブレット仕様とスマホ仕様のデザインも作ってみました。

これでざっくり6割くらいの完成度じゃないでしょうか。このあと実際にHTMLやCSSを書いていくわけですが多分書いてるうちに「ここはこうの方が見やすいなぁ」とか言い出すと思うので、サイトのデザインについてはこれ以上やりません。

サイトのデザインについてはSketchでやってみたのですが、サイズの調整や間隔の調整、枠線つけたり影つけたり、角丸くしたり半透明にしたりするのもとても簡単で、しかもこれをCSSに書き出せるという便利機能があるのが魅力!次回はその辺りの作業が終わったぐらいでまた記事にしたいと思います。では!

コメント

タイトルとURLをコピーしました