1)に引き続き、今回はUI設計の話です。UI設計の大まかな流れは以下の通り。構成案を基にレイアウトラフを制作まず前回制作した構成案を基に、必要な要素を取り入れつつUIのラフを出していきます。ラフ案なので気張らずに大まかに考えていきます。レイアウトが似たり寄ったりにしないように気を付けつつ書き出します。表現しきれない時は、デザインの隅にメモを書くと後々便利ですラフ案はデジタルでもアナログでも問題ありませんが、デジタルだと「綺麗に書こう!」という気持ちが強く出やすいため、そういった方はアナログで作業すると良いと思います。1枚の大きな紙とボールペンを用意しましょう。消しゴム等で消せてしまうと細かい修正を入れ始めてしまうため、ボールペン等の一発書きが出来るものをお勧めします。ラフからピックアップを選択ラフの中からなるべく方向性が違う案を3つほどピックアップします。今回は下記をピックアップしました。選定基準ですが、なるべくレイアウトが被らない物をピックアップいたしました。それぞれのレイアウトの特徴については後述いたします。これらをラフから綺麗に整形していきます。ラフをブラシュアップしてカンプを制作カンプとは簡単に言えばデザインを行う前の「設計図」です。家を建てる前に設計図を用意するのと同じです。デザインも突然作り始めるのではく、設計図を用意するところから始まります。これは自分自身がデザインを行う際に円滑に行うためと、作業分担がされていた場合担当者に説明がしやすいようにする役目があります。デザインカンプでは細かなデザイン処理は行わず、「何をどこに置くか」を、実際の寸法(縦1360px)で制作します。実際にラフ整形して制作した3つのカンプが以下となっております。ブロークングリッドレイアウト風サムネイルの黒い箇所はhoverアクションを想定している通常のブログ系のデザインとは趣向を変えて。新着の投稿については、上部にやや大きめに表示。分かりやすいように日付も挿入している。デフォルト系+ワンポイントメインビジュアルとその背景に斜めの背景を挿入。基本的なレイアウトは崩さず、変化を持たせている。2カラム風+ミニマルメインビジュアルを縦に使用。疑似2カラムのデザインに。文字情報を極力減らし、スッキリとさせた。基本的に縦と横どちらにも対応できるように、バラバラの画像でも見た目の綺麗さを保つために正方形のサムネイルを採用しています。この中から一つを起用、或いはまとめて、次回からはデザインに入っていきます。(1)お問い合わせお問い合わせはこちらからお願いします。