私が作成したWebサイトのポートフォリオです。デザインは手掛けていないので、全てコーディングのみとなります。お借りしたデザインはそれぞれのポートフォリオに記載しています。
ポートフォリオでは全てGithubを使ってソースコードを公開しています。完成したサイトを見たい場合はWebサイトURLを、ソースコードを確認したい場合はGithubのsrcフォルダ内を御覧ください。
デイトラの卒業制作
東京フリーランスが運営している、デイトラの卒業制作を作りました。
noteで販売されているデザインカンプから、HTML/CSSを作成し、Wordpress化したものです。
→ 【卒業制作】コーディング × WordPressテーマ化 練習素材【※実案件です】
HTML/CSSの作成に19時間、WordPress化に12時間かかっています。
PCのみでのデザインカンプからレスポンシブ対応にして、スマートフォンでも問題なく見れるようにしています。
WordPress化に際しては、以下のようなプラグインを使いました。
- Advanced Custom Fields
- All-in-One WP Migration
- Breadcrumb NavXT
- Contact Form 7
- Duplicate Post
- Smart Custom Fields
- WP Multibyte Patch
- WP-PageNavi
noteの指示では、繰り返しフィールドの実装をAdvanced Custom Fieldsを使うことになっていたのですが、無料では使えない機能だったためSmart Custom Fieldsを使うことにしました。
以下の内容が可変要素になっています。
- Youtube表示内容
- ニュース
- キャスト
- スケジュール
- チケット予約サイトのURL
- ストーリー
- 著名人コメント
作成したWebページを公開するに当たり、ベーシック認証をかけてあります。
ユーザー名：graduate
パスワード：graduate$123
WebサイトURL：https://graduate.tsuchiya.blog/
Github：https://github.com/gsg0222/graduate
しょーごさんのデザインカンプ
しょーごさん（https://twitter.com/samuraibrass）がnoteで公開している、XDのデザインカンプをコーディングしました。
PCでのデザインのみだったものを、レスポンシブ対応にしてHTML/CSSの静的なコーディングを行いました。
加えてJavaScriptとjQueryを用いた動的なパーツも存在します。お問い合わせはGoogleフォームを使って、Ajaxにて非同期通信を行うようにしてみました。
作成には17時間ほどかかっています。ヘッダーのハンバーガーメニュー設置に予想以上に時間がかかったこと、コンテンツ欄の微調整に手間がかかったことが原因です。
WebサイトURL：https://gsg0222.github.io/shogo/dist/
Github：https://github.com/gsg0222/shogo
東京フリーランスの無料デザインカンプ
東京フリーランスが無料で公開している、pngファイルのデザインカンプをコーディングしました。
→ 【無料練習素材】あなたはできる？模写コーディング腕試し！
レスポンシブでコーディングしています。ただ、あまり厳密な調整をしていないのでブレークポイント近くではきれいに表示されない部分があるかもしれません。
作成にかかった時間は5時間です。