卒業作品「狭庭日記」に

ロゴ、ファビコン作り

Webクリエイター養成科ではHP（ホームページ）自作に向けた授業が続いています。
先にサイトマップ、ワイヤーフレーム（といえるかどうか）を作成したので、次はタイトルロゴとファビコンを制作することに。

自作HPは菜園ブログを想定しているので、テーマである「ブログ（記録）」のイメージをどう具現化するか…。
菜園といっても本当に狭～い庭でのことなのでタイトルは「狭庭日記」に。
タイトルロゴは、パソコンとカメラのイラストと、タイトル名をドッキングさせたものに。

紙にラフ画を描いた後、Illustratorを使ってロゴ作り。
タイトル名の方はテキスト機能を使って塗りと線で形づくるという簡単な作業ですが、パソコンとカメラのイラスト化に手間取りました。
パソコンもカメラも大枠は四角形、色はブラック基調なので、本来は簡単なハズなのですが…。

ファビコン作りもIllustratorで。
ファビコンとは「favorite icon（お気に入りアイコン）」の略称。
Webサイトを開いて、上部タブに明示されるサイトの名称の前をよく見ると小さなデザインマークが付いています。
Twitterでいうと、これまでは青い鳥（Xになって変わってしまいましたが…）。
Facebookでは、ブルーの正方形の中にｆの文字が白抜きで描かれている、あれ、です。

しかし、ここでも「Illustratorの壁」が！
カラーパレット（スウォッチ）の呼び出し方にはじまって、お気に入りのカラーの登録、そしてレイヤーが駆使できず、もうしどろもどろ、七転八倒です…。

復習そして復習

HPの骨格と装飾は、HTMLとCSSのファイルに書き込みます。
これまで授業で使ってきた教科書をひっくり返して参照しながら、さらに先生にヘルプしてもらってのコード入力作業です。

HTMLでは－。
ヘッド部分で、タイトルを「狭庭日記」、検索をしてヒットした際のページの要約表示（ディスクリプション）を「プランター野菜と草花の生長を紹介」に。そしてファビコンを入れているimgフォルダ、装飾を担うCSSのスタイルシートをリンクさせます。

ボディと呼ばれるページ本体のヘッダー（上）部分で、ロゴのリンクと、クリックすると別ページに飛ぶ仕掛けのナビゲーションメニューを設置。プロフィールのページへ行けるようにしました。
次に、狭庭の様子を伝えるブログ記事と写真を日付ごとに「箱」に入れて、その「ブログ記事箱」が縦に10ほど並べて表示されるように書き込み。
フッター（下）部分では、ホームとコンタクトのページへ飛べる仕掛けと、著作権を表示しました。

CSSファイルでは－。
共通項目として、文字フォントをヒラギノ丸ゴシックに指定して、文字サイズについてh1を20px、ｈ2を18px、多くの文字テキストを16pxなどと設定。背景の色、写真のサイズも明記しました。

ヘッダー部分については、ナビゲーションメニューのクリックボタンの色や形、ボタン内の文字テキストの色や大きさ等を決定。
メイン部分の「ブログ記事」を入れ込む「箱」の幅や高さ、箱内見出しのサイズ、テキストの画面右寄せ等を設定。映し出す画面と表示するコンテンツの隙間であるマージンとパディングも。
フッター部分では、背景にヘッダーとは別写真を据えるための写真とのリンク指示、コピーライトについて書き込みました。

教科書片手に一つ一つ振り返り、復習しながらコードを入力していきます。

実力以上でも以下でも…

一歩一歩、卒業作品の制作を進めているのですが、気付かされるのはやはり自分の非力さ。

発想力にしろ、技術力にしろ…。
制作者は「どのように表現したいのか、そのためにはどうすればいいのか」を考えなければなりませんが、その発想力がトホホなほど貧困!
Illustratorのさまざまな機能やWebプログラミングも、仕組みを理解した上で使いこなせなければ意味がありませんが、その技術力がこれもトホホなほど低レベル!

センスがなければイラストは武骨なまま。
センスを洗練されれば、輝いたイラストを描けます。
入力コードを1文字でも誤れば、Webは無反応のまま。
適切なコードを組めば、Webはその通りにちゃんと反応します。

打てば響きますが、打たなければまったく響かない。
卒業作品は実力そのものを映し出す鏡といっていいでしょう。
実力以上のモノも、以下のモノもできません。
あぁ恐ろしや、非情かな…。