HPを作るためにはHTML・CSSの正しい理解と使用が重要なのでコードジャンプを使って練習しました。直属の上司から教えていただいた知識です。WEBデザインでは見出しやMV、footer、header等の位置関係の理解が不可欠です。シンプルで自由自在にコーディングができるようになりました。こちらに掲載しているものはあくまで練習の一貫なので一般への公開は極力控えております。練習で作った二次創作として楽しんでいただければ幸いです。
codejumpでHP模写サイトを使って、様々なHPを作ってみました。
作成したダミーサイト
ダミーサイトその2
奇妙なギターアニメサイト
某アニメのギャグ二次創作漫画がもしアニメ化したら？という妄想で作成しました。Pixivで私が好きなイラストレーターさんが作成する二次創作漫画をアニメ化したことを想定し、作ったものです。背景を動かすという視覚的な効果も入れ、楽しいサイトに仕上げました。カラーリングはポプテピピックをベースに、ポップでファンシーな世界観を再現しました。
- 制作期間：ラフ案から実装までおよそ1ヶ月。
- 使用ソフト：XD、Photoshop（モザイク、キャラクターの色合い編集）、Illustrator(ロゴ・バナー作成)、VScode、ClipStudio
- ポイント：イラストはClispStudioにて作成しています。最期は絵が得意な同僚に作画監督をお願いしました。アニメ絵での作画が好きなので、とても楽しいコーディング練習となりました。
ダミーサイトその3
カフェサイト
codejumpのカフェサイトの写真を入れ替えてダミーサイトを作りました。タイトルはそのままで、画像だけ、フリー素材からダウンロードして加工しました。
- 制作期間：実装のみ。およそ1週間。
- 使用ソフト：Photoshop（MV色合い編集）、VScode
- ポイント：position:relativ、position:absolteの関係性に随分悩まされるHPとなりました。新着情報を縦書きにして並べるのも苦労しました。今ではそういったことも少し考えればできるようになったので、たくさんのcssに触れておいて良かったなと思います。
ダミーサイトその4
コーポレートサイト
codejumpのコーポレートサイトから着想を得て作りました。ここまで大がかりなサイトを作るのも初めてでした。地方で作られたデザイン会社をコンセプトに、楽しい社員がトラブルを起こしながら働いているという妄想をHPに盛り込みました。架空の会社に架空の実績を載せることが楽しかったです。
- 制作期間：実装のみ。およそ2週間。
- 使用ソフト：Photoshop（MV色合い編集）、VScode
- ポイント：お問い合わせやaboutのページも肉付けして本当に会社があるかのように作るのがとっても楽しかったです。レスポンシブがうまくいかなかったり、テーブルの関係性が分からない部分が大変でした。その辺は今でも理解できていません。
ダミーサイトその5
アニメ広告サイト
codejumpのコーポレートサイトをベースにして作りました。codejumpでは施工会社のコーポレートサイトだったのですが、なんとか楽しく作ることはできないかな、と思案した結果、自分の妄想のアニメHPにしようと思い、取り掛かりました。
- 制作期間：ラフ案から実装含めおよそ1.5ヶ月
- 使用ソフト：Photoshop（MV、動画作成）、Illustrator(ロゴ、ページ作成)、ClipStudio(キャラクターデザイン)VScode
- ポイント：今回は挫折した部分も多く、キャラクターの顔にホバーアクションがかかるところは分からなかったのでcssをコピペしてしまいました。しかし、新たな試みも多く、動画の実装や動画自体はphotoshopで作ることができる、ということで実践してみました。ほぼ自分の妄想で作られた世界観なので、アニメ風イラストにも凝りました。妄想で作り出したキャラクターや既存のキャラクターをイラストとして興しています。HPを作るにはストーリー性を大切にしました。アニメのHPを意識したのでイラストの作成にはとくに力を入れました。トレースではなく模写です。