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

2017-04-05 | カテゴリー : デザイン , ホームーページ

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

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

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

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

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

PC用

タブレット用とスマートフォン用
　　

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

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

これで完成です。

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

2017-03-23 | カテゴリー : デザイン , ホームーページ

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

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

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

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

を作成します。

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

トップページのデザイン

その他ページのデザイン

スマートフォンのデザイン（最小の横幅を320pxに想定）

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

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

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

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

2017-03-16 | カテゴリー : チラシ , デザイン

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

前回までの制作物です。

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

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

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

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

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

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

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

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

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

2017-03-11 | カテゴリー : チラシ , デザイン

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

前回までの制作物です。

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

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

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

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

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

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

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

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

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

2017-03-09 | カテゴリー : チラシ , デザイン

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

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

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

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

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

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

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

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

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