ブログ

「広島フロントエンド勉強会 デザイン部 Vol.2」開催レポート

DSC_1817

こんにちは、デザイナーのTantanです。

2017年5月13日(土)10:00~12:00に、ヒロフロデザイン部 Vol.2を開催しました。
今回のテーマは「手を動かして学ぶレイアウトデザイン」。(ヒロフロ公式ページの開催概要はこちら)

お題に沿ってバナーをデザインし、データを参加者同士で交換してさらにブラッシュアップする、という内容でした。

お題

「架空のショッピングモールのグランドオープン告知バナー」
ロゴと仕様書と素材写真を配布し、「前半(初案制作)30分:後半(交換してブラッシュアップ)30分」の時間制限でやりました。

みなさんのbefor & after

一組目

banner-traning01デザイナーTさんは、30分でしっかりした完成度でした。文字も写真も見やすく配置されています。
特に所在地やオープン日に目が行くよう工夫されています。
そして、さらに良くするための意見として、

  • このショッピングモールの大人っぽさやオシャレ感を出すよう書体を検討してはどうか
  • HIRO TOWNのロゴと日付のベースラインを揃えるとスッキリするかも

ということで後半30分でDさんにafterを作っていただきました。
書体を見直したことでスッキリしたのがよかったですね。あと、ベースラインも揃っています。スペースの中で位置がやや下に下がってしまったので、5と24を上に出す揃え方もあったかもしれません。(↓ちょっと作ってみました。)
banner-traning02

同じペアで、交換していただいたもうひとつのbefore & afterはこちら
banner-traning03職業訓練生のDさんは、時間のない中で写真の選定、文言の配置をし、さらに「新世代ショッピングモール」というオリジナルのコピーを加えたり、2017年5月24日の数字を大きくしてメリハリをつけたりと、工夫されています。さらに良くするための意見としては、

  • 日付とロゴの可読性を高めたい
  • 余白が窮屈な部分があるので整えたい

そこでTさんが後半30分で作ってくださったafter。
きっちりグリッドに揃えられて見やすくなりました。

二組目

banner-traning04エンジニアOさんは写真をタイル状に並べたバナーを作ってくださいました。賑やかなショッピングモールの良さがよく伝わってきます。用意した素材写真が9枚だったため、もう一枚はご自身で選定されたようですね。さらに良くするための意見としては、

  • 文字を大きくして読みやすくしたい

afterでは、Fさんが文字を大きくし、「ショッピングモール」という言葉を追加してくださいました。書体を検討したり、文字のメリハリを調整したり、試行錯誤がうかがえます。
(よく見たら日付がなくなっていますが、日付は残したほうが良かったかも)

banner-traning05Fさんのbeforeは、きれいな花の画像を背景にしています。日付のところなどは「5.24satあさ9時」と、表記が工夫されています。さらに良くするための意見としては、

  • 文字を読みやすくしたい
  • 花だけでなく「ショッピングモール」を視覚的にアピールしたい

そこでOさんが作ってくださったのがafterです。
半透明の白を敷いて、だいぶ文字が読みやすくなりました。また、写真が増えてショッピングモール感が増しました。Oさんは「写真を自然な感じで重ねたかったけどやり方がわからなかった」とのことで、透明マスクのテクニックをご紹介しました。

三組目

banner-traning06ディレクターKさんは女性の写真と波型の図形で、やさしい雰囲気のバナーを作ってくださいました。文字の大きさ、色使いなど、読みやすさにも配慮されています。さらに良くするための意見としては、

  • 縦横のサイズが違うので直す
  • カフェだけじゃないモールの魅力をアピールしては

そこでOさんが作業をして、afterのデータを作ってくださいました。ダミーコピーだったところにテキストを入れ、モールとしての訴求が増えました。サイズを合わせてレイアウトを調整したときに、左側の余白が窮屈になってしまったようなので、もう少し余裕があると良いと思います。

エンジニアOさんのbeforeは、「途中で一度データが飛んでしまった」とのことで残念でした。

Kさんのafterでは、ショッピングモールの背景写真を活かして作ってくださいました。HIRO TOWNのロゴが2つあることについては、Kさんも「バレましたか」と苦笑いしておられました。参加者の方から「上のロゴをGRAND OPENに変えては」というアイデアもありました。

四組目

banner-traning08

beforeは弊社新人デザイナーのしゃーまん作。色々迷いがみられます。身内ということで、スタッフから辛口コメントがビシバシ飛んでいました。がんばれしゃーまん!

  • 鉢植えの写真だけではショッピングモール感が薄いので、写真を変えてみては
  • 文字の並べ方が中途半端なのでメリハリがほしい

そこでNさんに直していただいたafterを見ると、元の骨格を残しながら情報が整理されています。緑枠付きのロゴにしたのは見やすくて良いですね。日付とOPENを近づけ、BOOKS&DIY&GOODSは少し離してあるのも気が利いています。

banner-traning09デザイナーNさんの初案はこちら。スッキリして見やすいです。写真の選定もショッピングモールらしさがありますし、日付の入れ方もおしゃれです。さらに良くするための意見としては、

  • ロゴが他の文言に埋もれているので、ロゴらしさを増したい
  • 緑の帯に黒の日付は見にくい

afterではそれが反映されていますね。ただロゴが入っている緑の帯の存在感が強くて、白くて爽やかだった印象が若干重たくなったのは惜しかったです。あと、「素材写真の手すりが水平すぎて、デザインとかぶって気になる」という意見も。確かに。

五組目

banner-traning10アプリ開発者Eさんは、Illustratorの操作に不慣れとのことで、それでも頑張ってここまで配置してくださいました。ショッピングモールの雰囲気が伝わる画像を選んで、四隅に配置されています。

afterは私が作業しました。「オリーブグリーンに違和感がある」「リボンとOPENのカーブがズレている」という鋭いご指摘をいただきました。あばばば。

banner-traning11こちらのbeforeは私の作ったバナーです。デザインソフトをお持ちでない参加者の方が2名いらっしゃったので、私の制作画面をデモとして見ていただきました。
DIYのイメージでペンキのローラーのイラストを描いてみました。30分の制限時間でイラスト素材まで作るのは無謀だったかもしれません。ご指摘いただいた改善点としては、

  • ショッピングモールの写真がつぶれていてモール感が弱い

ということで、Eさんがafterを作ってくださいました。ショッピングモールらしさを伝える写真が追加され、賑やかになりました。

まとめ

今回、全体で2時間でしたので、かなりの駆け足タイムアタックでした。「制作中の緊張感がすごかった」という感想もいただき、本当にお疲れさまでした。
ひとつのお題に対する様々なアプローチが見られて、とても勉強になりました。
本当は、ご参加いただいた皆様にもっと相互に意見を出してもらいたかったのですが、時間が足りずほぼ私ひとりで講評していく形になってしまったのが心残りです。これからもできるだけ「相互に意見交換できる勉強会」を目指してやっていきたいと思いますので、またのご参加お待ちしております。

初めての試みで心配でしたが、参加者の皆様のおかげでなんとか形になりました。ありがとうございました!

イベントの告知・受付はconnpasで行っています
connpas 広島フロントエンド勉強会〜デザイン部〜

前回(Vol.1)のイベントレポートはこちら
ヒロフロデザイン部 ご参加ありがとうございました!

今回のテーマの原案はspicagraphさんのサイトでご紹介されていた「バナーデザインくるくる会」です。こちらの記事を拝見して、参考にさせていただきました。ありがとうございました。
→「バナーデザインくるくる会vol.2を開催しました

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. blog_gif-01 エム・フィールド広島オフィスの福利厚生事情
  2. blog_twitter エム・フィールド広島オフィスのランチタイム
  3. magazine2-50 PHP Business 「THE21」3月号に掲載されました!…
  4. 2017-new-year-bird-8 あけましておめでとうございます。
  5. carp3 【カープ】#3 広島、丸3打点の活躍でセリーグ最上位の3位に!
  6. m-field_tokyooffice04 広島オフィスメンバーがはじめてエム・フィールド本社におじゃましま…
  7. news_study 第94回「WEB TOUCH MEETING」に登壇予定です
  8. oyster 東京本社からの視察をお迎えしました。

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP