AZINCOURT
  • アジンコートについて
  • サービス
  • 制作実績
  • ブログ
  • コラム
  • 採用情報
  • お問い合わせ

スタッフブログ

2020年2月18日 Tumblrのテーマを自作する Part 2

  • WEB
Tumblrのテーマを自作する Part 2

前回(Tumblrのテーマを自作する Part 1)に引き続き、今回はUI設計の話です。UI設計の大まかな流れは以下の通り。

①構成案を基にレイアウトラフを制作
②ラフからピックアップを選択
③ラフをブラッシュアップしてカンプを制作

構成案を基にレイアウトラフを制作

まず前回制作した構成案を基に、必要な要素を取り入れつつUIのラフを出していきます。ラフ案なので気張らずに大まかに考えていきます。なるべくレイアウトが似たり寄ったりにしないように気を付けつつ書き出します。

表現しきれない時は、デザインの隅にメモを書くと後々便利です

ラフ案はデジタルでもアナログでも問題ありませんが、デジタルだと「綺麗に書こう!」という気持ちが強く出やすいため、そういった方はアナログで作業すると良いと思います。1枚の大きな紙とボールペンを用意しましょう。消しゴム等で消せてしまうと細かい修正を入れ始めてしまうため、ボールペン等の一発書きが出来るものをお勧めします。

ラフからピックアップを選択

ラフの中からなるべく方向性が違う案を3つほどピックアップします。
今回は下記をピックアップしました。

選定基準ですが、なるべくレイアウトが被らない物をピックアップいたしました。それぞれのレイアウトの特徴については後述いたします。

これらをラフから綺麗に整形していきます。

ラフをブラシュアップしてカンプを制作

カンプとは

簡単に言えばデザインを行う前の「設計図」です。家を建てる前に設計図を用意するのと同じです。デザインも突然作り始めるのではく、設計図を用意するところから始まります。
これは自分自身がデザインを行う際に円滑に行うためと、作業分担がされていた場合担当者に説明がしやすいようにする役目があります。
デザインカンプでは細かなデザイン処理は行わず、「何をどこに置くか」を、実際の寸法(縦1360px)で制作します。

そして、実際にラフ整形して制作した3つのカンプが以下となっております。

ブロークングリッドレイアウト風

サムネイルの黒い箇所はhoverアクションを想定している

通常のブログ系のデザインとは趣向を変えて。
新着の投稿については、上部にやや大きめに表示。分かりやすいように日付も挿入している。

デフォルト系+ワンポイント

メインビジュアルとその背景に斜めの背景を挿入。基本的なレイアウトは崩さず、変化を持たせている。

2カラム風+ミニマル

メインビジュアルを縦に使用。疑似2カラムのデザインに。文字情報を極力減らし、スッキリとさせた。

基本的に縦と横どちらにも対応できるように、バラバラの画像でも見た目の綺麗さを保つために正方形のサムネイルを採用しています。

この中から一つを起用、或いはまとめて、次回からはデザインに入っていきます。

この記事を書いた人

Amy

デザイナー / イラストレーター

前の記事へ 次の記事へ
新着情報
  • ChatGPT活用術!私の実践例とおすすめ【ビジネスから日常まで】
  • 年末年始休業のお知らせ
  • 404ページデザイン|おしゃれ・素敵なサイト5選
  • スマホ幅(モバイル幅)Webデザインの特徴・サイト事例7選【Webトレンド】
  • 手書き風フリー素材サイト|おすすめ5選
  • » STAFF BLOG 一覧

カテゴリー一覧
  • TIPS
  • WEB
  • アジンコート紹介
  • イベントレポート
  • お知らせ
  • スキルアップ
  • ダイアリー
  • マーケティング
アーカイブ
  • 2025年1月 (1)
  • 2024年12月 (1)
  • 2024年4月 (1)
  • 2023年10月 (1)
  • 2023年7月 (1)
  • 2023年3月 (1)
  • 2023年2月 (1)
  • 2023年1月 (3)
  • 2022年12月 (2)
  • 2022年10月 (2)
  • 2022年9月 (1)
  • 2022年8月 (2)
  • 2022年7月 (3)
  • 2022年6月 (3)
  • 2022年5月 (2)
  • 2022年4月 (3)
  • 2022年3月 (4)
  • 2022年2月 (4)
  • 2022年1月 (2)
  • 2021年12月 (1)
  • 2021年1月 (1)
  • 2020年5月 (1)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (2)
  • 2020年1月 (2)
  • 2019年12月 (2)
  • 2019年11月 (1)
  • 2019年10月 (1)
  • 2019年9月 (1)
  • 2019年8月 (1)
  • 2019年7月 (1)
  • 2019年2月 (1)
  • 2019年1月 (1)
  • 2018年9月 (2)
  • 2018年4月 (1)
  • 2018年3月 (1)
  • 2018年1月 (1)
  • 2017年11月 (1)
  • 2017年9月 (1)

お問い合わせ

お問い合わせはこちらからお願いします。

お問い合わせはこちら
  • アジンコートについて
  • サービス
  • 制作実績
  • スタッフブログ
  • 採用情報
  • お問い合わせ
x

〒160-0023
東京都新宿区西新宿3-3-15
新宿ワシントンホテルANNEX 4階

  • プライバシーポリシー

© AZINCOURT Inc. All Rights Reserved.