2017年5月22日月曜日

英語リトミック教室のアメブロヘッダーとメニューデザイン

【ブログヘッダーとメニューのデザイン】

こんにちは、柿の庭デザインの石田です。
アメブロのヘッダーの作成依頼をいただきました。


依頼主は、英語リトミック「Little Stars English」、のぐちさとこ さん。
北海道在住の方ですべてメールでやり取りしました。
良い時代…!

今回は、ヘッダー部分にメニューも欲しいという事で、そちらも作りました。

   まず、ヘッダーは画像として作ります。

Illustratorをつかって作ります。


ヘッダーデザインは写真を数枚いただき、色合いなどを決めました。
二人の可愛いお子さんは双子ちゃんだそうです!
とても英語リトミックが楽しそうですね〜。


メニューはhtmlとcssで作るので、どこにメニューが来るかヘッダー画像を作りつつ表示の計画を立てます。
いわゆるWebデザインをします。


   こんな感じでイメージ図を作ります↓
ブログ表示のイメージ図

画像の下から10px上に横196px X 縦65pxのボタンを5つ配置する…細かく数値を決めてたらメモ帳にコピペしておきます。

マウスがボタンを選んだ時の動作も決めます。
マウスが上にのったら、色が濃くなりドットが項目の下に現れるようにデザイン計画を立てました。

   こんな感じでイメージ図を作ります↓
ボタンが選ばれた時のイメージ図


メニューはヘッダーと一体となっているけど、実は別物なんです。


ヘッダーは一枚絵、メニューはcssとhtmlで表示させているのです。

cssで色とフォントとメニューの位置を指定して、htmlでlistタグを使って教室案内〜など項目を入力、webフォントの読み込みの指定をしています。

やっている事は簡単なのですが、アメブロのどこに入力するかとか難しいと感じました。

その点は、同じブログでもBloggerはもっとシンプルで、cssもhtmlも簡単に編集入力ができます。テンプレートの種類は多くありませんが。


設置作業時間は1時間もらいました。
30分もあれば終わるのですが、何が起こるかわからないので念のため。



   どんな感じになったのかは、のぐちさんのブログで♪
のぐちさんのブログ



ヘッダー制作と合わせて約1週間あれば素敵なブログに早変わりです!


******

ブログヘッダー作成料金 ¥6,500(税抜き)、メニュー¥3,000(税抜き)で承ってます。
フッターやWEB用素材も♪

お問い合わせはお気軽にどうぞ。
kakinoniwa.d@gmail.com