HP自作に挑む

パソコン

菜園ブログ

暦は8月-。
朝から日差しが強く、うだるような暑さが毎日続きます。
Webクリエイター養成科講座への片道2時間弱の通学もあと1カ月を切りました。
授業はいよいよ最終コーナーへ。
これまで学習してきたことを踏まえ、自分でオリジナルのホームページ(HP)を作成するというステージです。

まずはどんなホームページを作るか。
先生が先月下旬ごろから、過去の卒業生の作品をいくつか紹介してくれていました。
知人の依頼を受ける形で制作したネイルサロンや診療所のHPのほか、子供服のリサイクル販売をテーマにしたもの、自分の就職活動時に活用できる実績資料(ポートフォリオ)等々。
Web上のカレンダーをクリックして訪問日時が予約ができたり、服の種類や大きさごとにカテゴライズされていたり、ポートフォリオも静的だけでなく動的に見せたりと、いずれもかなりのスキルを持って作り込まれています。

爺は典型的なアナログ人間ですので、知人からHP作成を頼まれることなどなく、起業するという構想を持っているわけでもなく、ポートフォリオ用のデジタル作品の実績など持ち合わせているわけもなく、さて…。
と、思いついたのが家庭菜園ブログです。

妻の「お種ばあさん」がここ数年家庭菜園に目覚めて、トマトやキュウリ、ナスやらを育てているのですが、コンスタントな収穫と品質向上を図るには、種まきの時期とか天候とか「記録」が重要なはず。
ところが、お種さんは記録には無頓着。その一方で「去年はいつごろどうしたか、どうだったか…」と独り言。
そこで、菜園で手掛ける野菜や草花の生長を記録するためのブログページを作成して、プレゼントしてあげましょうと。
お種さんに相談することなく、勝手な思い付きによる押し付けのような格好ではありますが…。

サイトマップ

養成科の先生によると、HP制作のカリキュラム想定日数は延べ11日の間で、その間にトップ(ランディング)ページを含め3ページ以上を作成することが課題。
具体的手順として、サイトマップ、ワイヤーフレームを作った上で、HTMLとCSSのコードを編集、ロゴマーク、Web掲載画像の準備も進めるようにとの指示がありました。


では、サイトマップの作成からとスタートさせたものの、どのような内容をどのような形にまとめればいいのか、勝手が分かりません。
これまでの講座の基調となってきた教材を改めてひもとくことになりました。

サイトマップの制作は…。
まず必要なページを書き出して、ページ同士のつながりを構図としてまとめ、関連性のあるページ同士を1つのグループとしてまとめていく。
こうすることで、分かりやすい「階層」をつくることができます。
階層が深いと、ユーザーが何度もクリックしなければ目的のページに到達できないため、なるべく2階層以内に収めた方がよろしいようです。
特に見てほしいページは、目に付きやすいようにホーム(トップ)ページにナビゲーションメニューを設置してそこに配置します。

ワイヤーフレーム

ページ構成が決まったら、ホーム(トップ)ページから順にすべてのページのレイアウトに着手します。このレイアウトはテキストやライン、ボックスのみで作り、デザインの骨組みのようなものでこれを「ワイヤーフレーム」と呼ぶそうです。

ワイヤーフレームでは、各ページごとにどのようなものを載せるのかを列挙します。
例えば、ホーム(トップ)ページであれば「タイトル」「ロゴ」「メイン画像」「ナビゲーションメニュー」「紹介コンテンツ(物品、文章等)」「写真」といった具合。
その上で、優先順位の高いものから、Web画面上に掲示する順序や面積の大小を考えてながらデザインしていきます。
最近、ユーザーの指向がパソコン(PC)より携帯モバイル優先になってきていることを踏まえ、フレームワークもモバイル版の作成から入っていきました。

最初は手書きでと思っていたのですが、クラスメートが一連の講座の中で学んだIllustratorを使って描画を始めたので、「右にならい」。
しかし、これが間違いでした。
だってIllustrator講座で学習した内容はすでに忘却の彼方だったからです。

左右前後のクラスメートは、レイヤーといわれる重層構造、写真などを切り取るクリッピングマスクといった機能を使いこなして、見事なワイヤーフレームを次々に作成していくのですが、当方は教材を片手に四苦八苦。
挙手して先生に教えを請うと、先生は活用すべきIllustratorの機能と名称、呼び出し方法を口頭で説明してくれて、たどたどしくもその指示通りにカーソル、キーボードを動かせば想定したデザインを描くことはできます。
が、その仕組みをしっかりと理解していないので、再び同じ作業を繰り返えそうとしても思い通りにいかず、いたずらに時間だけが経過していくといった感じ…。

情けないことしきり。
トホホです。
フレームワーク作成段階から大きく出遅れてしまったのでした…。

タイトルとURLをコピーしました