MASANAO MAEDA
PORTFOLIO

模写コーディングが終わったあと、次に取り組んだのが朝礼で発表するためのWEBページ作成です。（発表の内容は模写コーディングで培った技術の共有）そこで私は、訓練が始まって約3ヶ月の段階で学んだ知識をフル活用して作成しようと考えました。

ページのコンセプトを決める

まず自分の会社を立ち上げたという設定でその会社のページを作ろうと決めました。そして「SANKOU」などのWEBデザインギャラリーなどを参考にしページのイメージを固めていきました。
・自分のアップルデバイスを使用し、ITのイメージを出す
・ダークでスタイリッシュなイメージ
・フォントでなるべくインパクトを出す
このコンセプトを元にまずはロゴの作成を始めました。ロゴは前田のコーディング技術紹介ということで、「MAEDA CODING TECHNOLOGY」から『MCT』に決めました。（ロゴ作成の詳細は別記事で紹介）
ロゴの作成の次にコンテンツマップを作り、写真などの素材の収集を行いました。写真は全て自分で撮り、Photoshopで明暗を変えたり背景をぼかしたりなどの加工を行いました。

ワイヤーフレーム、デザインカンプ

素材などの準備が終わってから、ワイヤーフレームの作成に入りました。模写の時とは違い見本がないので、ここで自分のページを一から作るんだということを改めて認識しました。レイアウトの骨組みからデザインまでかなり悩みましたが、なんとか自分のイメージに近い形で作れたかと思います。

コーディング

そしてコーディングに取り掛かるのですが、正直模写の時以上に苦労しました。なぜなら検証コードのような参考にできるものがないからです。本で調べたり講師に質問もしましたが、今回は特にネットで検索しまくりました。とにかく分からないところがあれば直ぐ検索の繰り返しで、作成時間よりも、調べている時間の方が圧倒的に多かったです。
なんとか期日までに作成は出来ましたが、デザインカンプとは違うものになってしまいました。技術的に無理だった所だったり、考え方が変わったりなどで変わっていってしまいました。

感想・まとめ

模写の時よりもかなり苦労しました。見本もなく一から作るのがこんなに大変なんだと改めて考えさせられました。ただこのページの作成で確実にCSSの知識は深まりましたし、WEBページを作るのって楽しいなと思うことができました。デザインカンプと違うものを作るのは本来ならあってはならないことだと思いますが、今回は自分の勉強のためなので、色々と試しながら作成することを優先しました。