市川ウェブデザイン

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

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

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

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

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

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

PC用
blog-dining-1

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

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

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

これで完成です。

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

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

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

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

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

を作成します。

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

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

 

その他ページのデザイン

 

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

 

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

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

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