LPデザイン制作・コーディング

【所要時間】合計 30時間（情報設計：6h、デザイン制作：12h、コーディング：12h）
【使用ツール】Illustrator/Photoshop/HTML/CSS

目次

①課題概要

②実装LP

③情報設計

④工夫したこと

⑤制作を通して学んだこと

①課題概要

• クライアント情報
  クライアント名：TSUTSUMU株式会社
  ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や、家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
• 目的
  LPを通してエントリーをしてもらうこと（エントリーがあれば誰でもいいわけではなく、カルチャーフィットしている人がターゲット）
• ターゲット
  転職希望の方
  報酬面よりTSUTSUMUの世界観に強く共感できる方
  未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人
• トンマナ
  明確なブランドトンマナが決まっていないため、事業内容にあうトンマナを自由に提案してほしい

※SHE likes MULTI CREATOR COURSE Designer 実践課題より引用

②実装LP

③情報設計

④トンマナ・デザインカンプ詳細（PC・SP）

⑤制作を通して学んだこと

◆情報設計〜実装までの一連の流れ

クライアントの依頼を元に、ペルソナやトンマナ等の情報設計・デザイン制作・サーバーアップまで、一通りできるようになりました。また、コーディング作業に入る前にマークアップ設計図を作成することで、今どこのコーディングをしているか明確になり、迷うことなくコーディングができました。

◆実装を意識したデザインの制作

デザインカンプの時点で、この画像の横に文字を配置するにはどのようにコーディングするのだろうと考えながら制作しました。

事前に考えておくことで、ほぼデザインカンプどおりに実装でき、予定よりも早く仕上げることができました。

◆レスポンシブデザインのコーディング

メディアクエリを使用して、スマートフォンでの表示を調整することができるようになりました。

実装後に実際にスマートフォンでの見え方を確認し、再調整しました。

◆slickを使用した動きのあるページの制作

今回はslickを使用し、スライダーを表示させましたが、今後はJavaを使用したり、

動画を埋め込んだりして、様々な動きのあるページを制作したいと思いました。