MASANAO MAEDA
PORTFOLIO

一番最初に取り組んだのが、模写コーディングです。既存のWEBサイトの検証コードを見ながらHTMLやCSSを真似ていくので、初めてWEBサイトを作る際には模写コーディングから入るのが一番勉強になるみたいです。ただ、まだ知識も乏しいので、どのサイトがやりやすいのかが分からず、星の数ほどあるWEBサイトの中から自分が模写するサイトを見つけるのにかなり悩みました。

模写するサイトを決める

私の母親が陶器の器などを販売するギャラリーを営んでおり、過去にHPを作りたいと相談されたことがあったのですが、その時は仕事が忙しく知識も技術もなかったので、応えて上げることができませんでした。そういうことがあったので、将来母親のお店のHPを作るために、練習も兼ねて似たようなギャラリーのHPを模写使用と決めました。

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

模写するサイトを決めたら、次にXdで、サイトをキャプチャした画像を横に並べてワイヤーフレームを作りました。初めてXdを使用しましたが、使用感などで戸惑うことはほぼありませんでした。ただコーディングのことを考えて作成するということだったので（例えばdivで囲む要素も考えて）ここでかなり戸惑いました。
ワイヤーフレームが完成すれば、次にデザインカンプですが、元々のデザインは決まっているのでデザインカンプの作成はスムーズに進みました。

模写コーディング

そしていよいよコーディングです。サイトの検証コードを見ながら、コピペは極力使用せず、全て自分で記述していきました。HTMLの記述は全部自分で出来ましたが、CSSの方はかなり苦戦しました。検証コード通りに記述してもその通りになることがほとんどなく、ネットで調べたり、講師の方に何度も質問したりと試行錯誤しながらフラフラになりながら作成していきました。

感想・まとめ

模写を始めた当初は分からないことだらけで、本当に完成できるのかとかなり不安でしたが、なんとか作り上げることができました。見た目の動きやデザインなどはかなり忠実に再現できたので、自分としてはそこそこ納得のいく出来でした。やはり模写はかなり勉強になり、特にCSSの知識はここでかなり培うことができたと感じてます。
※制作した模写ページは写真・ロゴ・文言などをオリジナルのものに差し替えてます。