アプリ紹介LPをデザイン〜コーディング（課題）

お久しぶりです。

今日は、先週の火曜日に提出した課題についてまとめます！

今回はコーディングの授業の課題で、企画・デザイン・実装まですべて自分で行うというものでした。

特に実装はなかなか思うようにいかず大変でしたが、そのぶん完成したときの喜びも大きかったです。

それに、実際のWebサイトとしてURLがあると、ほかの人にも共有しやすいです。

友達、実家の家族にいっぱい見せました。笑

制作物

さっそく完成物をお見せします。

以下のURLより実際のサイトをご覧いただけます！

tokyo-d-plex.com

（受講期間中は学校のWebサーバーを使わせてもらえるような形だと思うので、

そのうち消えてしまうかもです）

サイトについて

このLPで紹介しているアプリは、実際にUI/UXの授業で制作しているものです。

UI/UXの授業は、5人グループで半年間かけてひとつのアプリを制作するという形式です。

私たちのグループには1歳児を持つお母さんがいたことをきっかけに、「乳幼児とのお出かけをサポートするアプリ」をつくることになりました。

アプリ自体は鋭意制作中ですので、その過程もまたまとめようと思いますが

このアプリを紹介するLPを制作すると決めた時点では、すでにブランドカラーやロゴ、イメージキャラクターなどが決まっていました。

（グループの中にグラフィックデザインやUI/UXデザインの経験がある方がいらっしゃり、その方がデザイン面で活躍してくださいました！）

今回は、そうしたロゴやデザイントーンはすでに決まっている状態で、

画像をお借りしてLPをデザインしています。

個人的には、いつもより実際のお仕事に近い形でデザインができたのかな？と思っています！

制作過程

企画〜デザインコンセプトの決定

学校で配布していただいたテンプレートをもとに、ごく簡単にですが

今回のサイトの競合調査や作成の目的、ターゲットをまとめました。

ブランドカラーの黄色を基調にすることはほぼ決定事項として、

「みてね」のようにシンプルでユニバーサルな雰囲気を出すこと
ブランドの世界観（キャラクターなどがいて、ポップな感じ）に合わせ、楽しさや明るさも感じさせること

を意識してデザインを行うことにしました。

Web Design ClipなどでアプリのLPをいろいろ見てみたのですが

シンプルでスタイリッシュかつ、曲線的でやわらかなな印象のgincoや

メインカラーが同じ黄色で、ポップでありながら優しい雰囲気のpaymeなどのサイトをかなり参考にさせていただきました。

デザイン作成

デザインカンプ・WFはFigmaで作成しました。▼

www.figma.com

黄色をメインにしつつ、グレーも使って少し落ち着きも感じられるトーンにし、

画像を角丸＋太めの枠線付きにすることでかわいらしさ、柔らかさを出しました。

今回はレスポンシブ対応のWebサイトを制作するという課題だったので、PC、スマートフォン、タブレットの3パターンのデザインを作成しています。

以前のWebグラフィックの課題で、ファーストビューだけPC・スマホの2パターンのデザインを組んだことはあったのですが

タブレットのデザインは初めてだったので、どのように位置づけてデザインするかは少し迷いました。

いろいろなサイトのレスポンシブ対応の様子を参考にさせてもらい

タブレットは基本的にはスマホ版と同じデザインにし、ファーストビューだけPCに近いスタイルにしています。

コーディング

HTML・CSSのほか、jQuery プラグイン（ハンバーガーメニュー・スライダー）も使用しました。

スマホ版は問題なくコーディングできたのですが、タブレット版・PC版で画像と文字を横並びにするのに苦労したり

PC版の「できること」のセクションで文字と画像の左右を互い違いにするのに手こずったり…。

ハンバーガーメニューが変な挙動をしたり、スライダー（slickというプラグインを使用）の画像が動かなくなったり…。

なかなか大変でしたが、最終的になんとか形にすることができました。

コーディングは3日ぐらいにわたって行なったのですが、最終日になるとだいぶうまくいかない理由がわかってくるようになりました！

特に、CSSのカスケーディングの仕組みをきちんと理解できていなかったために、セレクタの優先度が入れ替わってしまっているのが原因のことが多かったです。

たまにスライダーの挙動がおかしくなってしまうという問題があるので、実際の仕事の成果物とするにはやっぱりまだダメだなという感じですが

ぱっと見は自分でも十分ホンモノっぽいWebサイトに見えるので、できたときとても嬉しかったです。

先生からの講評

授業での簡単なプレゼンもあったのですが、その後先生がありがたいことにひとりずつ講評を文章にまとめてくださったので

そのまま掲載させていただきたいと思います。

【ビジュアル】
白と黄色の背景色のコントラストが印象的で、ターゲットにマッチした色使い、また余白を広めに指定する事で、シンプル且つみやすいサイトに仕上がっていると言えます。
また、PCでのナビゲーションとメインビジュアルをフルスクリーンで配置し、コンテンツエリアには内部固定を使用したところなどもトレンド感も感じる印象を受けます。

レスポンシブでのレイアウト変化も、基本的には適切に配置できていると感じました。

＜気になる点＞
１、ナビゲーションの背景色
プレゼン時にも話しましたが、ナビゲーションの背景色が黒なので、サイト全体のイメージに合わない印象を受けます。
この場合は明るめの色（白など）でテキストを黒で反転させるなどにすると統一感が出るのでは無いでしょうか？

２、モバイルでのダウンロードボタンの配置
これもプレゼン時にも話しましたが、モバイル表示の際のダウンロードボタンの配置が気になります。
２段で表示する方法も話しましたが、この場合、ダウンロードボタンの水平位置が不自然なので、ハンバーガーメニューとダウンロードボタンのサイズを共に小さくし、この２つをセットで右サイドにまとめて配置する方法、またはロゴをセンターに配置し、両サイドにハンバーガーとダウンロードボタンを振り分けるアイデアでも良いかもしれません。

【コーディング】
基本的な文書構造に関しては、よく理解できていると言えるでしょう。
検索エンジン対策に関しても、意識的にキーワードを埋め込んでいる印象を受けます。
コメントタグに関しても意識していることが伝わってくる記述となっていますが、css内部ではもっと積極的に入れていくと良いでしょう。
メディアクエリやビットマップの使用も問題無くできています。

気になる点は一つだけ
メインビジュアルの文書構造
メインビジュアルである「#top」の要素がmain内に配置されています。
メインビジュアルは、いつも授業でも「#top_main」としてmain外に配置していますが、ここはファーストビューなので特殊な要素としての文書構造が必要です。
タグは無いのですが、あえてmainとは別物として配置するのがある意味文書構造と言えます。