Web site

Portfolio 2023

就職活動にあたり、これまでの制作物や自身の経歴をまとめたポートフォリオサイトを作成しました。
制作過程や強みを簡潔・明瞭に伝えることと効率の良い開発・保守環境の構築を目指しました。

Client

自主制作 サイトをみる

Role

• ヒアリング
• 要件定義
• 情報設計
• デザイン
• コーディング
• CMS実装
• テスト
• 公開作業
• 運用

Development

言語：

HTML / CSS (Sass) / JavaScript

環境：

Node.js / npm / Webpack / Babel / Docker / wp-env

ツール：

Figma / VScode / GitHub / WordPress

Term

約1ヶ月

Release

2023年4月

背景

Background

目的

フロントエンドエンジニアを目指して就職活動を行うにあたり、

• これまでの制作物を通して制作のスキルや考え方を伝える
• 自身の人柄や強み、経歴を伝える

対象

Web制作会社の採用担当者

課題

1. 制作過程や思考、強みを明快に伝える情報設計とデザイン
   見る人が求める情報や行動を考え、理解するとともに、制作における考え方や人柄が伝わるようにサイト構成やコンテンツの見せ方を工夫すること。
2. ES2015以降のJavaScriptを使用した開発
   モジュール・class構文を使用したオブジェクト指向プログラミングとPromiseを使用した非同期処理を実践・習得すること。
3. 効率の良い開発・保守環境の構築
   「作って終わり」ではなく、その後も長く使い、愛され続けるサイトをつくる技術を身につけるために、ディレクトリ構成や使用技術に選定などの設計部分にわこだわりを持って制作すること。

戦略

Strategy

情報設計

「何ができる人なのか」「どんな人なのか」の順で私について伝えることを目指し、サイトを構成しました。

「何ができる人なのか」

トップページの制作物リストでどのような経験があるのかを、各制作物のページで制作における考え方や技術をより詳しく紹介し「何ができる人なのか」を伝えることを心がけました。

特に見ていただきたい制作物を先頭に並べるとともに、種類ごとに表示を切り替えられるフィルターを用意し、短い時間でも重要な情報を見逃さないように工夫しました。

「どんな人なのか」

制作物を見終わった後、トップページを最後までスクロールした後などコンテンツが終了する位置に、私についてより詳しく知っていただくための関連リンクや他ページリンクを配置することで、次のアクションを誘導するようにページを構成しました。

デザイン

作品が見やすいことを第一に考えながら、単調にならず私の人柄が伝わることを心がけてデザインしました。

レイアウト

まずはストレスなく閲覧いただけるように、基本ルールに則りながら、余白や要素サイズの比率などサイト全体のレイアウトを統一するよう心がけました。

配色とフォント

配色は、①作品が見やすく、閲覧時に負担の少ないこと、②温かみと誠実さが感じられることを軸に背景にベージュ、アクセントに深緑を取り入れました。

フォントは、日本語・英語ともに、①視認性が良くウェイトの豊富なこと、②柔らい雰囲気・温かみの感じられることを重視して日本語フォントに「ZEN角ゴシック」と英字フォントに「Lato」を採用しました。

アニメーション

見出しなどのポイントとなる要素に動きを加え、私らしいユーモアが伝わるように工夫しました。

オープニングにはタイピング風アニメーションを取り入れ、フィットネスインストラクターからWeb制作の世界へ飛び込んだキャリアを表現しました。

コーディング・CMS構築

効率の良い開発・保守環境の構築を目指すために、次の点を工夫しました。

管理画面でコンテンツの作成・更新を完結

• 再利用ブロックを活用し、WordPress編集画面からコンテンツを作成するためのパーツを作成
• 共通の入力項目にはカスタムフィールドを活用し、表示を統一

実際のサイトのスタイルを編集画面に反映

WordPressにオリジナルのeditor-style.cssを設置・適用し、実際のサイトデザインに近い編集画面にカスタマイズ

開発作業の効率化と保守性の高いサイト

• webpackの設定を一から行い、Dockerを使用してWordPressローカル環境を構築
• メンテナンス性を考慮し、FLOCSS設計を採用
• GitHub Actionsを使用した自動デプロイを活用し、ソースコードの更新作業を効率化
  

その他

使用したWordPressプラグイン

• Advanced Custom Fields（カスタムフィールド）
• Sticky Posts – Switch（カスタムフィールド：記事固定）
• Easy Table of Contents（目次）
• Highlighting Code Block（ブログ）
• SEO SIMPLE PACK（SEO）
• XML Sitemap Generator for Google（XMLサイトマップ）
• SiteGuard WP Plugin（セキュリティ）
• Akismet Anti-Spam（セキュリティ）

Figmaでデザインデータをみる