先月で、ブログを始めて2年。
このタイミングでimDRESSionsをリニューアルしました。
一年前から言い続けて、頭の片隅にずっとあったサイトリニューアル。
この度ついに実現したので「新imDRESSions」のサイトデザインについて紹介していこうと思います。
結構頑張ったので、少しだけお付き合いください。
CONTENTS
imDRESSionsリニューアル。コンセプトからズレないデザインに。
「自分らしい、装いを見つける。」
「3つのシーンが、自分らしい装いに…」
imDRESSionsのコンセプトは、ブログを運営していく中で「自分らしさ」を見つけること。
逆に言えば、「まだ、自分らしさが見つかっていない」わけです。
このコンセプトが伝わるようなデザインを目指しました。
特にこだわったのが、「シンプル」と「アクセントカラー」
この2つ。
シンプル。余白。
自分らしさが見つかっていないわけなので、装飾は極力減らしシンプルに。
モノトーンをベースにフラットな印象を感じてもらえるデザインを考えていきました。
とは言え、ただシンプルなだけでは印象に残らないかなと、意識的に余白を作ってあります。
特にファーストビュー。
トップページのファーストビューは、ロゴのみ。画像やコンテンツを配置したい気持ちをぐっと堪えて余白を強調しました。
次に記事ページ。ここはどうしても要素が多くなってしまうので、タイトル右側に3分の一程の余白を。
そして、本文テキストの左右にも余白を少しプラスしています。
今までのテーマはギュッと詰まった印象だったので、少しゆとりを感じるデザインになったかなと思っています。
アクセントカラーは一つに絞らない。
サイトで使うアクセントカラーを1つに絞ればその色が「らしさ」になると思います。
ただ、imDRESSionsのコンセプトから考えると、まだ「らしさが見つかっていない」のに1色に決めてしまうのは、いかがなものか。
そこで、imDRESSionsの3本柱
つかう【NEED】
まとう【WEAR】
感じる【SENSE】
このカテゴリーそれぞれにカラー設定をしました。
この3つのカテゴリーが混ざり合って「自分らしい、装い」が作られるというイメージで、色の三原色を採用。
シアン、マゼンタ、イエローを割り当て色味を調整しました。
ロゴもコンセプトに沿って。
ロゴもコンセプトに沿って制作。
3つの波紋をモチーフにしているのですが、そのひとつひとつがカテゴリー（シーン）を表しています。その秘密は3つカテゴリーページに行ってもらうと、分かるかもしれません。
3つのシーンが混ざり合って、自分らしい装い【DRESS】に…
https://imdressions.com/category/need/ https://imdressions.com/category/wear/ https://imdressions.com/category/sense/使用したテーマは『yStandard』
今回、無料のWordPressテーマ「yStandard」をベースにCSSでカスタマイズしました。
装飾を抑えたシンプルなテーマですが、カスタマイズを前提をしているだけあって簡単に自分だけのサイトを作れる面白いテーマです。
特に、純正プラグインの「yStandard Blocks」が秀逸で、トップページの構造はほぼこのプラグインで実装できました。
yStandardについては改めて記事を書こうと思いますので、自分らしいサイトを作りたいという人は、ぜひチェックしてみてください。
これから、ゆっくりと育てていきます。
とりあえずひと段落。今回のリニューアルでimDRESSionsのベースができたかなと思います。
今までリニューアルが気がかりで何も手につかなかったので、やっと記事を書くことに集中できると安心しています。
とは言え、これで完成したわけではありません。
今回使用したテーマ「yStandard」もまだ使い始めたばかりなので、これからブログを更新していきながらコンテンツに合わせて育てていく予定です。
3年目に突入したimDRESSions。これからも、よろしくお願いします。