WEBサイト ポートフォリオサイト

個人のポートフォリオのWEBサイトを制作しました。

About

個人のポートフォリオサイト|コーポレート制作

就職活動を行うために立ち上げたポートフォリオサイト。当管理人の幅広い経験を伝えるために情報の見せ方をさまざまな方法で表現しました。

担当範囲:ディレクション、デザイン、運用
制作年2025年
デザインコンセプトターゲットユーザー:採用担当者、デザイン関係者

目的・課題: 見やすい。必要な情報にすぐアクセスできる。

デザインの方向性:採用担当が会社内でポートフォリオサイトを見ることを想定。
様々な立場の方が見ること考え、ノイズが入らない余白の多いデザインに。

キーワード:シンプル、純粋
使用ソフトPhotoshop, Illustrator
制作期間2週間
制作時に考慮した点PCとスマホ画面の両方対応。採用担当が会社内でポートフォリオサイトを見ることを想定。単調になりがちな画像の羅列になるため、アニメーションをアクセントとして使用した。
どのページからも作品や問い合わせページにたどり着けるよう、構造をシンプルにし、作品以外のページは増やさないようにし、集約できるものは1ページにまとめた。
遷移先URLhttp://japandesign.stars.ne.jp/portfolio/

Details

カラー

十人十色でいろいろというイメージで対照的なブルーとピンク色を選択。あとはシンプルにめだたないグレーをアクセントカラーで入れました。

シェイプ

ビジネス用だけど個人らしさを前面に出すよう、全体的に直線、太目、角丸の表現を使用しました。

画像

商品カタログを見るように作品をたくさん並べました。モックアップも使い、実際のリアルな場を表現しました。

タイポフラフィ

見やすさを重視、くせがなく画像に集中してもらいやすいシンプルなフォント(helvetica, Roboto, Noto Sans JP)を使用することで、さまざまな年代の方に受け入れられるよう意識しました。

成果

ユーザーの反応:

導線がわかりやすい。迷わない。メニューやボタンの設置など工夫が感じると評価があった。

クライアントの要望への対応:

レスポンシブ対応、解析ツールの導入を行った。

関連ページの紐づけ等も行い、導線の整理を行った。

他WEBサイト作品

WEBサイト エメリリア

美容サロンのWEBサイトのリニューアルの依頼。 About 美容サロンのWEBサイト|コーポレート制作 土台となる骨から根本改善し、持続力、結果に定評の麻布十番の美容整体・マッサージ・ボディメイクサロ…

Read More

WEBサイト ポートフォリオサイト

個人のポートフォリオのWEBサイトを制作しました。 About 個人のポートフォリオサイト|コーポレート制作 就職活動を行うために立ち上げたポートフォリオサイト。当管理人の幅広い経験を伝えるために情報…

Read More

WEBサイト ミューズガーデン青山2025

美容サロンのWEBサイトを制作しました。 既存サイトをサイトリニューアルの依頼でした。 作品について 作品タイトルコーポレーションサイトクライアントミューズガーデン青山担当範囲:ディレクション、デザイ…

Read More

WEBサイト DOX合同会社

建築デザイン会社のWEBサイトを制作しました。 About DOX合同会社(デザイン事務所)|コーポレート制作 国内外で活躍する先進的なデザインを提供する空間デザインの会社DOX合同会社。機能的なのは…

Read More

同ジャンル作品

他WEBサイト作品

ロゴ エメリリア

美容サロンのロゴの制作しました。 作品について 作品タイトルロゴクライアント美容サロン エメリリア様制作年2025年デザインコンセプトターゲットユーザー: 30代, 産後女性目的・課題: 客層の変化で…

Read More

LP Flowerdays

架空のお花屋さんを想定してWEBサイトを作成しました。 作品について 作品タイトルflowerdaysクライアント架空のお花屋さんデザインコンセプトサイトは訪問者が迷わないようシンプルな構造に。お店が…

Read More

カレンダーマーチ

1年のイベントに関わるピクトグラムを作成しました。 作品について(白黒) 作品タイトルカレンダーマーチクライアント架空のイベントスタジオデザインコンセプト一目でわかるようシンプルにしました。存在感を出…

Read More

WEBサイト ポートフォリオサイト

個人のポートフォリオのWEBサイトを制作しました。 About 個人のポートフォリオサイト|コーポレート制作 就職活動を行うために立ち上げたポートフォリオサイト。当管理人の幅広い経験を伝えるために情報…

Read More