デザイナーのスキルアップ実務課題を作成してみました。

こんにちは。システム開発グループでデザインを担当しているTAKです。

アトラスのデザインチームは、毎週火曜日に1時間、勉強会を行っています。JavaScriptの勉強など技術的な内容から、フォントカルタのように遊び要素を交えたものまで、デザインチームが今デザイン周りで気になるものを取り上げて勉強しています。
今回はその中で私が企画した、「ランディングページの作成」の勉強会について紹介します。

勉強会のこと

テーマは、”デザイン制作工程の初心に立ち返り、その流れを意識しながらランディングページを作成すること”です。課題の制作メンバーは２名。私は依頼側という設定で、ヒアリングとアドバイザーを務めました。また、ただデザイン作成からそのままコーディングを行うだけではなく、ヒアリングから簡単なプレゼンテーションまでを行いました。
お題はパン屋の新商品をPRすること。どうしたら魅力的に商品の良さをPRできるかを想像してページのデザインを考えてもらいました。取り上げる商品のパンも各自で選んでもらいます。そうすることにより、コンテンツの中で何が重要なのかの優先度のつけ方と、キャッチフレーズを考えることで文言作成の勉強になると思ったからです。

制作のための情報を集める

まずはヒアリングから。ヒアリングされる側はパン屋側になった気持ちで答えました。
今回のヒアリング内容はこちらです。

重視する点（サイトを作成するうえで一番重視するポイント）

• 新商品を売りたい、話題になって欲しい（口コミなども）ので商品の良さを強くアピールしたい
• 土地柄、学生・ビジネスマンが多いので高級感よりも親しみを感じさせたい
• 店の位置がすぐに分からないと興味を失ってしまうので、どこに店があるのかがすぐ分かるようにして欲しい
• 「水道橋・パン・美味しい」や「神保町・パン・美味しい・安い」など日常に馴染みのあるワードで検索してお店が出てくると嬉しい
• 新商品のパンの種類は一つのみ
• 引きのあるテキストを考えてつけて欲しい（キャッチフレーズ）

利用ユーザ、メインターゲット

大学もあり、ビジネスマンも多いので両方をターゲットにしたいが、どちらかというと買ってくれそうなビジネスマンをメイン対象にしたい

• 男性・女性の区別はしない
• お金に余裕のある人
• 20代〜40代
• 食べることが好き、話題性に乗りたい、口コミで気になったらすぐ試してみたいタイプの人
• イメージはインスタではなく、twitter。お洒落なデザインではなくて、一般向けのイメージ

デザインの希望

• イメージはレトロ、ウッディ、レンガ
• 温かみを感じさせる

配色

• 茶色
• 暖色系

必要な機能

• 店舗地図
• お問い合わせ

上記を踏まえて出来上がったデザインが、以下の二つです。作ってみた感想も各デザイナーに聞いてみました！

成果物

＜デザイナー：もな＞

感想：
実際のLP制作の流れを短期間で経験できて良かったです。
今回のテーマが「パンの新商品」で、アトラスではやらない分野だったのでとても新鮮でした。
デザインについては指摘でも受けたのですが、今見るとサイト全体がかっちりしすぎていて、あんまりモダンじゃないなと思います。
ヒアリングで「ユーザ層はInstagramよりTwitter」という意見があったのですが、それに引っ張られてあんまりオシャレすぎてもな…と思ったのが良くなかったかもしれません。
今回はコンテンツ込みで考えないといけなかったのでコンテンツを考えるのに少し時間がかかりすぎて、デザインをブラッシュアップできなかったのが心残りです。

＜デザイナー：まお＞

感想：
ざっとスクロールしながらでも目で追えるようなレイアウトを目指しました。
ポイントとしてはいくら「美味しそう！食べたい！」となっても肝心のお店が遠かったらがっかりなのでページの早い段階で地図を表示しています。あと、どうせなら焼きたてのパンが1つから注文出来たら良いなという希望から「お問い合わせフォーム」ではなく「予約フォーム」を設置しました。
反省点としては時間配分がうまくできなかったことです。「重視する点」もすべて盛り込めていないなと。久々にイチから作ることが出来て楽しかったですが、決断力不足や作業スピードなど自身の弱点が見えた課題制作となりました。

---

私自身ヒアリングされる側になる機会があまり無いので、ヒアリングの時から自分の要望がどんなデザインになるのかとても楽しみにしていました。
デザインには明確な正解が無いと思っているのと各々の個性が出るので、出来上がってきたデザインと、どうしてそう作ったのかの理由や観点もそれぞれ違っていてとても興味深かったです。
また、ヒアリングされる側の立場に自分も立ってみる事で、どうヒアリングをすればより必要な情報を集められるのかを改めて考えられるいい機会になりました。

まとめ

アトラスではランディングページの制作よりも大規模なサイト構築を行うことが多いので、今回出した課題はいつもと異なる考え方や制作方法を学ぶ上で勉強になりました。
システム開発グループではこうした各チーム内での勉強会の他に部署内での勉強会など様々な勉強会が存在していて、技術の習得意欲が高い人がとても多いです。
この記事を通して「アトラスにはどんなエンジニアがいるんだろう？」と少しでも興味を持っていただけたら嬉しいです。