TOP

ポートフォリオ(当サイト)

WordPress
  • ポートフォリオ
Yuuki PortFolioのモックアップ

制作範囲

  • WordPress
  • コーディング
  • デザイン
  • 企画
  • 資料作成

使用言語

  • HTML
  • Javascript
  • JQuery
  • PHP
  • Sass
  • WordPress

制作ツール

  • AdobeXD
  • Illustrator
  • PhotoShop
  • VSCode

制作期間

  • 3ヶ月

【GitHub】


プロジェクト概要

ポートフォリオとしての作品掲載とブログ投稿機能を備えたポートフォリオ兼ブログサイトです。

WFの作成からデザイン、コーディング、PHPの組み込みによるWordPress化という作業を始めて行い制作したサイトとなっています。

プロジェクトの目的

  • 制作作品をCMSから簡単登録
  • ブログとポートフォリオを合わせることで、サイトの管理・運営の効率化
  • ブログの情報発信による自己研鑽と有益な情報の発信

制作概要

ポートフォリオとブログを兼任した理由

当サイトは作品の制作実績登録とブログ運営を同時に行うことができますが、サイトを分けることによる管理は非効率的で、ブログかポートフォリオのどちらかが放置されてしまうという事態を招きかねませんでした。

ポートフォリオとブログの一本化により、掲載する作品の制作過程やブログ投稿によるアウトプットを同じコンテンツ内で発信できるため、1つのWebサイトとしてまとまりのあるサイトになると考えました。

また、ブログを書いている最中に、常に作品が目に触れることで “ポートフォリオサイトとして” 実績を残していくためのモチベーションにも繋がるようになりました。

デザインの意図

TOP

ポートフォリオサイトの目的は第一に制作作品を閲覧していただくことが目的であるため、ビジュアル直下に表示する構成にしました。

ユーザーの目的に合わせたコンテンツ配置を心がけています。

ポートフォリオのトップページの制作実績

WORKS 制作実績

「制作作品をCMSから簡単登録」という目的実現のため、制作実績投稿用のカスタム投稿を実装しました。

カスタムタクソノミーを使用し、制作範囲や使用言語などをタグから登録できるようになっています。

初めて制作したポートフォリオはHTMLとCSSで構築したサイトだったため、更新するにもタグを探して、全て書き換えるという手間がかかりました。

ポートフォリオサイトのカスタム投稿

 

カラーパレット

Yuuki Portfolioサイトのカラーパレット

灰色から黒を基調とした配色を採用しました。

シンプルで洗練された印象を与える配色で、作品の視認性向上を目指しました。

使用フォント

ベースには「Noto Sans」を使用し、見出しには「klee」を採用しました。

Kleeは手書きで書かれたような自然の雰囲気がありアートやクリエイティブな印象を与えることからこちらのフォントを採用しました。

制作を通して

ポートフォリオとしての作品掲載機能でカスタム投稿の登録や子カテゴリーからのリンク構築など初めてのWordPress構築にはかなりハードルの高い内容となりました。

しかし、作業を通して自分の制作したサイトをCMSで簡単に更新とサイト運営ができる環境を構築していくことに関してはとても楽しいものがあり、時間はかかりましたが無事実装することができました。