テクノロジー

架空の保育園サイトを作りました

Kana🐥UGOK's icon'
  • Kana🐥UGOK
  • 2021/09/17 06:38
Content image

 

 

こんにちは、kanaです。

 

今回はWebデザインの勉強のため、架空の保育園サイトのデザインを作成しました。

考えた点などをここにまとめていこうと思います。

 

ではさっそく見ていきましょう。

 

🌷作成前に

デザインの目的:入園者の増加、保育園の雰囲気を伝えたい

ターゲット:入園を考えている母親(2,30代)

雰囲気や伝えたい印象:子どもが伸び伸び過ごせて安心できる空間

 

これらを意識してデザインしていきます。

 

制作期間:1週間

使用ソフト:XD、procreate

 

🌷TOPページ

※文字は同じものを置いて代用しているところがあります

Content image

 

やわらかい色でまとめました。

写真を角を丸い図形の中に入れたり、四角形の角を丸くしたりと、色以外でもやわらかく見えるように工夫しました。

 

子どもたちが伸び伸びと過ごす雰囲気を伝えたいということで、園の様子が分かる「お知らせ・日記」のまとまりを上に持ってきて、下にはInstagramも入れました。

 

より子どもらしさが出るように、イラストも使用しました。

イラストは、自分で描きました。

写真はフリーのものを使用しています。

 

忙しいお母さんでも素早く情報にたどり着けるように、「一日のスケジュール」「年間行事」「施設案内」と細かくボタンを用意しました。画像では少し見つけにくいかもしれませんが、右側に「お問い合わせ」ボタンを常についてくる形で設置しています。

 

フッターの地図は、架空の場所です。本当はマーカーの様なものを置きたかった!

 

🌷園のことページ

Content image

園の過ごし方などがまとめられたページです。

1日のスケジュールは、下にまっすぐ伸びていく感じでまとめました。細かく画像も載せて雰囲気を想像しやすくしています。

 

年間スケジュールは、横スライドでまとめました。画像も四季によって入れ替わります。1日のスケジュールの要素が縦に長いので、年間スケジュールの方はコンパクトに収まるように意識しました。

 

施設案内は赤い丸ボタンをクリックすると、施設の写真と説明がポップアップで出てくるというものを想像しています。写真が子どもの表情重視のものが多いので、建物の雰囲気も伝わるようにと用意しました。

 

🌷入園情報ページ

Content image

かなりスカスカになってますが…

情報を表にすることで、情報を見つけやすくしようとしています。

下に見学案内の表記をイラストと共において、気軽に来ていいんだよという感じを出しています。

 

🌷お知らせページ

Content image

お知らせと日記を同じページにまとめているので、カテゴリをつけました。

「お知らせ」タグのみに絞って大事な情報だけを表示できるような感じを想像しています。

 

🌷よくある質問ページ

Content image

質問文のバックの色を変える、Aの文字色を赤くすることで、ぱっと見て情報の種類を判断しやすいようにしました。

 

まとめ

以上です!

やわらかい雰囲気は出せたのではないのかなと思います。

あしらいを入れるのに慣れていなくて、子どもらしさを出したいと思う割には、シンプルなものになってしまったな...と思います。

いろんなサイトを覗いて、引き出しをもっと作らないとな~と改めて感じました。

また、お題を作ってデザインの練習してみようと思います。

 

では!
 

Supporter profile icon
Article tip 1人がサポートしています
獲得ALIS: Article like 16.57 ALIS Article tip 1.10 ALIS
Kana🐥UGOK's icon'
  • Kana🐥UGOK
  • @HMDKN

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

「ハッシュ」とは何なのか、必ず理解させます

Like token Tip token
0.10 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
56.20 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
59.32 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
69.82 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
55.05 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS