Work4 デザイン

明るい未来をイメージできるデザインに。

子育てに不安のない社会を作るという企業の方針から、温かみのある配色で、柔らかい印象のデザインにする。そのために、写真の角を取った丸みのあるデザインを意識する。明るい配色や笑顔の写真を選定するなど希望を持ってもらえるようなデザインを心掛けた。

学んだこと・工夫した点

こちらのデザインカンプはFigmで作成。Figma使用で特に学んだことは、1.色スタイルの登録 2.Font installers 3.テキストスタイルの登録 4.コンポーネントの作成である。1.色スタイルの登録では、繰り返し使うカラーをあらかじめ登録する。 2.Font installersではPCのローカルフォントを使用できるようインストール。3.テキストスタイルの登録では、フォントスケールを用いたデザインを行えるよう文字サイズや行間等をいくつか登録する。そうすることでWebサイトのデザインに統一感やリズムを生む。 4.コンポーネントの作成では、デザインに頻繁に使用するボタンのコンポーネント作成を行った。テキストに応じて横幅が自動で変化し、何度も同じデザインを作成しなくて済む大変便利な機能を学んだ。 また、イラストや曲線を使用することで柔軟性の求められる保育の現場をイメージ。制作期間は約3日。

要件定義

01プロジェクトの概要

保育に特化した様々なサービスを提供する企業の保育園。関東(東京、埼玉、千葉)に6園を展開。企業の理念は、子育てに不安の無い社会をつくること。子育て真っ只中の夫婦、これから子どもを保育園に預けたい子育て世代が訪問するサイトであり、それらの世代に情報が正しく伝わるようなサイトを制作する。サイトリニューアルが目的。

02クライアントの要望と解決方法

クライアントの要望

親御さんが訪れるページなので情報が正しく伝わる、分かりやすいページにしたい。親しみや実際のイメージを持ってもらえるよう写真とイラストを入れ、園の雰囲気を伝えたい。園を知ってもらい入園を希望している人に情報がゆき届くページにしたい。 園のホームページを通して、他の自社サービスを知ってもらいサービスを利用・活用してもらいたい。子育てに希望や楽しさを持ってもらえる明るいサイトにしたい。

解決方法

明るく親しみを持てる配色にする。元気な子どもたちを安心して預けられるように、余白をとり、トンマナを意識して必要な情報が伝わるページを作る。興味を持ってもらった場合、資料請求や見学会などの問い合わせを行うことを考慮しボタンを作成する。

03ターゲットのペルソナ設定

年齢/性別
31歳/女性
趣味
子育てで手いっぱいで趣味の余裕がない
家族
4人
職業
職場復帰を希望
その他
子育てを相談できるコミュニティーが欲しいと感じている

04デザインコンセプト

キーワード

#明るく #子どもをイメージ #太陽

トーン&マナー / フォント
メインカラー
#EDA890
アクセントカラー
#F2BD12
ベースカラー
#FFFFFF

明るく朗らかなイメージのピンク色をメインカラーにした。サブカラーには太陽を彷彿させるオレンジ色を設定し、子どもたちがお日様に当たって元気に走り回る風景を想像できるように選定。

Zen Maru Gothic

日本語には丸みのあるフォントを使い、柔らかさを出した。

05ラフデザイン / カンプデザイン

デザインカンプを作成するにあたりまず初めに、Googleドキュメントにサイトの要件定義書や必要な情報を想定してから書き出し、ラフデザインを作成という手順を踏んだ。双葉の新芽はデザインカンプを作成中に「育む」というキーワードから思いついた。ガーランドのイラストはペンツールで作成。トンマナを意識したバナーも作成した。TOPに戻るボタンは子どもの塗り絵のイメージで、色をきっちり塗らず、あえて崩すことでサイトの中で目立つ存在になった気がする。登園許可証明書のPDFダウンロードボタンでは、一言サイズを明記することでサイトに訪れた人のあらゆるシーンでの判断材料になり、より利便性が上がった。

ポートフォリオサイトのロゴ制作。

今までの経験から大事にしたい想いを込めたデザインを心掛けた。

学んだこと・工夫した点

自身のポートフォリオサイトのシンボルである「卵」を使ったロゴを制作予定だった。案を図に起こしていく中で「手」という文字がキーワードになった。調理の現場では、一番最初にお米の研ぎ方を教わった。米一粒ひとつぶを傷つけないよう、赤子に触れるように優しく研ぐ。手を合わせる形からこれを拝み洗いという。私はこの所作が好きで、自分の手でものをつくるときは心を込めて向き合いたいという思いを込めて、包むような手の形と自分のイニシャルをイメージしてロゴに取り入れた。それぞれ5本の線で成り立っているのは、毛細血管や"血が通う"という言葉をイメージした。

Top