市川ウェブデザイン

チラシを題材にしてホームページ制作。中華ダイニング2

今まで勉強として中華ダイニングのチラシを制作しましたが、これを元にしてホームページ制作したいと思います。ホームページ制作までの過程をブログ記事にしていきます。

これが勉強のために作成したチラシです。

このチラシを元にしてホームページ用にデザインを制作しました。20170323-1

今になって見返すと、なんでこんな風になったんだろう?と不思議に思います。「チラシのデザインと違いすぎるだろう」と思いました。まあ、チラシとホームページは違いますから、デザインが違っても良いですけど・・・。

完成です。ホームページ公開しました。

PC用
blog-dining-1

タブレット用とスマートフォン用
blog-dining-2  blog-dining-3

各端末(PC、タブレット、スマートフォン)で、最適に見えるように制作しています。上の画像のどれでも良いですが、クリックすると実際のホームページへ移動します

今回は、普通のHTMLファイルです。WordPressではありません。ブログ記事を使用しないと想定して作りました。その代わり、ツイッターで新着記事などを表示できるように作りました。

これで完成です。

チラシを題材にしてホームページ制作。中華ダイニング1

今まで勉強として中華ダイニングのチラシを制作しましたが、これを元にしてホームページ制作したいと思います。ホームページ制作までの過程をブログ記事にしていきます。

これが勉強のために作成したチラシです。

このチラシを元にしてホームページ用にデザインを作成します。デザインですが、

  • トップページ
  • その他ページ
  • スマートフォン用のページ

を作成します。

ということで、デザインを制作しました。

トップページのデザイン
20170323-1

 

その他ページのデザイン

 

スマートフォンのデザイン(最小の横幅を320pxに想定)
20170323-3

 

今回のデザインは短時間で出来ました。といいますか、普段のホームページをデザインするときよりも全然早く出来ました。しかも上手くデザインできたと思います。

事前にチラシ制作をしていたので、どうやって作ろうかというイメージが自然と浮かびました。事前準備をしっかりすると、仕事が早いし、出来も良い!今回、学びました。

これでデザインは終了します。次回からコーディング作業に入ります。

チラシを題材にしてデザインの勉強。中華ダイニングのデザイン制作4

コチラが参考にしたチラシです。

前回までの制作物です。

一応これで出来上がりとしても良いですが、少し修正します。

 

20170316-1

「勝華」の文字が細いため、エンボスが上手くいかず、立体感が出せなかったので、フォントを変えました。あと、ゴールドのグラデーションをもう少し細かく設定しました。

 

20170316-2

「中華ダイニング」の黒色の枠はいらないと思いましたが、枠を外すとゴールドがぼやけて見えたので、やっぱり元に戻しました。ゴールドは白枠ではなく、黒枠が引き締まって見えると今回学びました。

 

20170316-3

この2つの画像の赤色は、同じ色なのですが、どうも同じ色に見えません。原因は枠の色が白と黒で違うからです。違和感を感じるので同じ枠色に合わせました。

20170316-4

少しインパクトが無くなった気がしますが、まあコレで良いです。

 

あとは配色を少し整理して、背景の模様を変更しました。

これで完成です。というか、もう完成でいいです。

中華ダイニングの自分なりのちらし2170316

次回は、これまで制作してきた感想を書きたいと思います。

チラシを題材にしてデザインの勉強。中華ダイニングのデザイン制作3

コチラが参考にしたチラシです。

前回までの制作物です。

最後に地図を作成します。
20170311-1

実は地図作成は初めてです。普段はGoogleマップを埋め込むので、地図作成の機会はありません。良い機会なので学習しながら作ります。今回はIllustratorを使用しました。

まずは、Googleマップを背景に配置します。
20170311-2

 

Googleマップを参考にして道路、建物、駅をなぞります。
20170311-3

 

完成です。今回、地図のサイズが小さいので、可読性を考えて、大まかに制作しました。
20170311-4

 

地図をちらしに貼り付けて完成です。
20170311-5

 

一応、これでチラシ制作が完成しました。
20170311-6

次回は、現状よりもデザインの向上を目指すため、修正点を挙げて対応したいと思います。

 

 

チラシを題材にしてデザインの勉強。中華ダイニングのデザイン制作2

コチラが参考にしたチラシです。
 

前回は構成とテキストをデザインしました。
20170309-0

今回は画像を配置します。まずは、適当な画像を探します。必要な画像を洗い出します。

  • 背景に使用するイラスト
  • 中華料理の写真
  • ジョッキビールの写真orイラスト

無料画像が欲しい場合は、写真ACイラストACがおススメです。他にも無料画像サイトがありますが、正直コレが一番だと思います。

写真ACとイラストACですが、無料とはいえ、プレミアム会員(有料)のみダウンロード可のモノが結構多いです。その時は他の無料サイトを探しましょう。私は、いろいろ探すのが面倒なのでプレミアム会員になっています。

画像を配置したのがコチラです。
20170309-1

中華料理の写真は、探すのが大変かなと思いましたが、意外と簡単に手に入りましたね。それよりも背景を決めるほうが大変でした。正直イマイチかなーと思います。時間があれば、背景をもう少し良い出来にしたいです。

今回の作業である画像の検索と配置に1時間かかりました。次回は、地図の部分を制作します。