続WEBサイト制作実習

第2回制作実習

約1ケ月で１作品の制作が３ケ月間続きます。

毎回テーマが与えられ、制作上留意する点の説明を受けたら制作開始。

WEBサイト制作で大切なこと

リサーチ　出来る限り多くのWEBサイトを見て、良いと感じたサイトをブックマークしておく

　　　　　どこが良いのかを分析する　レイアウト　余白　色使いなど　良いところをインプット。

第２回　「カフェのホームページ」

まず全国のカフェをリサーチ　

たくさんあってどこも個性的

講師のアドバイスとして、できるだけシンプルなサイトを参考にした方が良い

まだ初心者なので複雑なものよりは制作できそうなものを選ぶようにと。

リサーチするのはカフェに限らず、他の業種も見てみる

おすすめはビジネス系　複雑な動きが少なくシンプルな作りのものが多いので参考になる。

実際のWEBサイトをトレース

いきなりゼロから自分でサイトを作るのはまだ難しい。

そこで今回は、これがいい！と選んだサイトをトレースします。

レイアウトなどを真似して同じように制作。

ワイヤーフレームの作成

AdobeのPhotoshopを使いWEBサイトの設計図、ワイヤーフレームを作ります。

Photoshopにガイド線をひいて、長方形ツールで画像、文書を入れる場所を設定。

デザインカンプの作成

ワイヤーフレームを作ったら、実際に画像や文言を入れてWEBサイトの完成予想図、デザインカンプ作成です。Top,Menu,Conceptなど各ページを制作します。

ワイヤーフレームに悪戦苦闘

参考サイトをトレースするとはいえ初心者にはなかなか大変です。

何をどこへどれくらいの大きさで配置するか。それだけでも難しいものでした。

結構手こずっている人も多いようでした・・・

HTML&CSSコーディング

ようやくデザインカンプが完成したら次はコーディング

用意した画像や文書などをWEBサイトに掲載するためにHTML&CSSで配置、色、大きさなどの情報を入力。

これがめっちゃ大変！

前回までの制作ではテキストの内容に沿ってコーディングしたから何とかできたけど

今回はテキストが無いので進まない。

講師に質問しまくりで一歩ずつわずかに前進

思い通りにはいかないけどようやく完成が見えてきました。

　

やっと完成＆プレゼン

めっちゃ苦労してようやく完成（一応完成にしておこう）

一人ずつ前に出て、プロジェクターで映してプレゼンします。

この段階で既に、人によって作ったものにかなりの差がありました。

自分で色々調べて「動き」を付けたり、スライドショーを入れたり、授業で聞いたことプラス自分で調べて作り上げた人が何人かいました。

すごいなぁと感心しまくりでした。

次はもっと頑張ろう！！

WordPressを教わる

第２回制作発表後WordPressについて少し教わりました。

このクラスのプログラムには本来入っていないんだけど最近WordPressでWEBサイトを制作することがかなり増えているそうなので、今後のためにと講師が粋な計らいで説明をしてくれました。

プログラムに入っていないのであまり詳しく時間をかけて教えてもらうわけにはいきませんでしたが、WordPressの特徴、可能性については少し理解ができました。

自分で勉強してみる価値がありそうです。