Takagi moe

峠レーシングスキーチーム様 公式サイト

WEBSITE 納品日 : 2023.11.04

現在テスト公開中となっております。(ポートフォリオ上での公開には承諾を得ています)

UserName : tougetest
Password : tougetest

峠レーシングスキーチーム
峠レーシングスキーチーム
概要
サイト新規立ち上げ(WordPress導入)
制作時期
2023年10月〜
期間
約1ヶ月
  • 企画/設計 5日
  • デザイン1週間
  • コーディング2週間
ページ数
7ページ前後
使用ツール
Photoshop / Figma / VScode

サイト制作の背景

メンバーの増員をめざして

峠レーシングスキーチーム様からのご依頼により、現在のチームメンバーの高齢化に伴い、若い世代の新たなメンバー募集を目的とするホームページ制作を行いました。サイトを運営されるメンバーの方のために、ページ内容の修正やお知らせの更新を簡単に行えるようWordPressを導入しています。

  • touge racing website
  • touge racing website
峠レーシングスキーチーム website SPモックアップ

設計とデザイン

シンプルなUI設計

PC操作に慣れていないメンバーの方がサイトを閲覧してもわかりやすい、シンプルな設計とデザインを意識しています。PC・SPともにヘッダーを固定し、特にPCでは全ページへのナビゲーションリンクを常に表示させることでアクセスしやすく、操作のストレスを軽減させています。

お知らせのカテゴリ分類

今後長く使用されるホームページとなることを予定して、過去の大会情報や練習案内なども簡単に遡ることができるようカテゴリ分類を取り入れました。TOPの新着情報でもサイト訪問者にチームの直近の活動内容がすぐに分かり、メンバー間でも情報を周知しやすいようにしています。

峠レーシングスキーチーム website カンプ
峠レーシングスキーチーム website カンプ

こだわり3選

01制作期間のスケジューリング

スケジュール管理のイラスト

企画からWordPress導入まで1ヶ月

企画段階においては、今回のwebサイトの目標を明確にし、具体的な要件定義を行いました。全体の作業工程の見通しをたて、各タスクに対して優先順位をつけて次に行うべき手順を見失わないようにしました。HTMLの構築と同時にワードプレス化を行い、共通化されている要素についてはパーツ化して使用し、余分な作業をできるだけ減らすことに努めました。

02メインビジュアル

峠レーシングwebsiteOGP画像

作成したOGP画像

レーシングスキーの魅力を伝える

チームに入会してもらうためにはサイト訪問者に魅力的なレーシングチームであることをアピールする必要があり、躍動感のある写真を主に使用して印象的なメインビジュアルとなるようクライアント様に素材提供をお願いし、こだわりの写真選定を行なっています。OGP画像では、メインビジュアルと同じ写真をモノトーンに加工して作成し、サイトへ飛んだ際に同写真に色がついたような印象となって目を惹きつける効果を目指しています。

03導線設計

ページ遷移のストレスを減らす

最もスムーズであるべき入会希望者のためのページでは、概要説明から目を通してもらう会則へのページリンク、専用のフォームについて同ページ内にまとまるようにして、入会のために必要な手順に迷わないよう設計しています。フォームの入力後、同意していただくプライバシーポリシーへの遷移も下にスクロールするだけで一読することができ、余計なページ遷移やモーダルなどのストレスをできる限り減らすよう工夫しています。

追記

( 2023/11/16現在 )クライアント様よりページコンテンツの検討中ということで、テスト公開となっております。添付している画像より変更の可能性もございますので、ご了承ください。

制作を通して

良かった点 新しい方法を取り入れる

これまでのwebデザインでは主にXDを使用していましたが、この制作からはFigmaでのデザイン制作に挑戦しました。コンポーネントを作成してパーツの共通化を行うことや、フレームのレイアウト機能を利用することで余白管理ができたり、レスポンシブを考慮した設計をコーディング段階に入るまえに計画することができ、スムーズな構築に繋げられました。新たなツールに挑戦することは、仕事の効率化にも大きく関わることを実感した制作となりました。

次に活かす点 能動的なコミュニケーションを

複数人の組織であるクライアントとのやりとりは初めての経験でしたが、メンバーの方の総意として意見をもらうために必要な工程や時間などの問題によって想定していたほど円滑には進まず、未決定項目が多い中での制作の進行は難しいものでした。クライアント側の取り決めに委ねるだけでなく、より多くの具体的な案を提示したり、時には日にちの制限を設けることで決定を促すなど、能動的なコミュニケーションが大切であると留意し、次に活かしていきたいです。