高橋翔ウェブサイト制作記録 ＃1 Flow

Kotone Ohta
最終更新 5月 26, 2023 5 分で読める

この記事では、普段写真と動画制作をしている Studio104 が初めて制作したウェブサイトを構築する流れを記録としてまとめました。

はじめに

Office TECOLI メディア事業部 Studio104 のアシスタント&マネージャー太田です。 普段私は、カメラマンのアシスタントとして撮影サポート・動画編集時はアニメーション制作(テロップや特殊効果など)、マネージャーとしてお客様とのコミュニケーションを担当しています。

今回制作したウェブサイトはこちらです👇

プロジェクトの概要

MTB Jr.ライダー高橋翔選手のウェブサイト制作。

  • 本人からのリクエストは「Studio104の写真や動画を使ったカッコいいサイト」
  • 期間
    • 開始: 2022/11
    • 終了: 2023/04 (チーム発足会での発表に合わせて)
  • 目的
    • 選手のアピール方法の一つとして、コンセプトは 「高橋翔選手とは？」がわかるウェブサイト。
    • ただのプロフィールや戦歴だけでなく、選手の性格や将来ビジョンもわかるような構成に。
    • また、既に選手自身で運営している各種 SNS への入り口としてや、SNS の会員ではない方でも見れる選手ブログとしても。

準備段階

一番の問題点はウェブサイト制作をしたことがないこと。 どのような手段を用いて制作するかの決定、またそれに慣れるまでが最も時間がかかり、難所でもありました。

今回は、歌代さん (Office TECOLI) に技術サポートを依頼。 フレームワーク選定、環境構築のサポートと、ホスティング代行をしていただきました。

また、制作に必要な技術 (プログラミング言語、デザイン理論) は、動画学習アプリである Udemy、プログラミング学習サービスである Progate を活用。その他書籍や Twitter、画像収集アプリの Pinterest などで、プログラミング技術知識やデザイン参考資料を集め、最近のウェブサイトらしいサイト作りを目指しました。

デザインは制作しながらも最後まで並行して情報収集は続け、プログラミング技術などの知識学習は基礎学習に一ヶ月ほどかけ、その後は制作しながら学習していく形で進めました。

制作プロセス

コンテンツの決定

サイトに掲載するコンテンツを決めるために、種目を問わず様々なスポーツ選手のサイトを調査。 項目をまとめて高橋選手と相談しながら掲載内容を決定し、必要なデータの提供やテキストの制作を選手に依頼しました。

サイト構築手段の選定

ウェブサイト構築手段として候補に上がったフレームワークは下記2種です。

どちらも実際に触ってみて、比較検討しています。

結果的に採用したのはランニングコスト面で優秀だった「静的サイトジェネレーター Hugo」です。

開発環境構築

開発環境は以下の通りです。

  • Visual Studio Code (エディタ)
  • Slack (開発チームコミュニケーション)
  • Discord (同上)
  • Google Chrome (ブラウザ)
  • Mobile FIRST (Chrome拡張機能)
  • Hugo (フレームワーク)
    • Hugoのテーマ: Pico
  • Git/GitHub (バージョン管理)
  • Netlify (公開サーバー)

開発環境構築は、歌代さんの提案・サポートありで行いました。

素材集め

写真、動画、テキスト、データを収集。

写真

撮影日2日(屋内・屋外)。撮影は Studio104 カメラマンの新井が担当しています。 また別件で請け負っていた「西東京市様ご依頼の ASTA ビジョンに放映する高橋選手の PV 動画」のために全日本選手権で私たちが撮影した写真も数枚使用しています。

使用機材:

  • カメラ: FUJIFILM X-T4 / X-H1
  • レンズ: FUJIFILM XF-50-140 / XF-16-55

幼少期の写真は選手のご家族からご提供いただきました。

動画

撮影日2日(屋内・屋外)。 写真撮影と同日に行なっています。 使用機材も同様です。 動画のみ、外部レコーダー ATOMOS NINJA V も使用しています。

また屋外での動画撮影は三上さん (cyclehouse MIKAMI 店主) にもご協力いただき、GoPro を背中や頭に取り付けて高橋選手の追走撮影などをしていただきました。

テキスト

History、Dreams、Bike に掲載している文章はすべて高橋選手自身に執筆していただきました。 誤字脱字チェックと、一部見出しなど作るために修正した以外はそのまま使用しています。 それ以外のサイトのテキストは私自身で作成し、高橋選手に確認いただいています。

データ

プロフィールやレースデータ、メディア掲載歴などを選手からご提供いただきました。

ロゴ

各スポンサー、サプライヤー、サポーターのロゴを選手からご提供いただきました。 また選手のサインも直筆でいただき、デジタルデータ化しました。

フォント

今回はすべて Google Font を使用しています。

素材の編集

写真

撮影した写真の現像は Adobe Lightroom Classic を使用。

提供していただいた過去の写真で本人をメインにトリミングするために Photoshop を使用。

また、写真の切り抜きや文字との合成も Photoshop を使用しています。

動画

Adobe Premiere Pro でPC版 (横長版)、モバイル版 (縦長版) それぞれトップビジュアル動画を作成。

ロゴ

一部ベクターデータ化が必要だったり、デザイン上全て白で掲載するために、Adobe Photoshop と Illustrator を用いて編集しています。

ページ制作

大まかな制作の流れは以下の通りです。

  • トップページ作成
  • 各ページの作成
  • ブログページデザインのカスタマイズ
  • 各ページごとにレスポンシブデザインの設定
  • OG タグの設定

一部 Figma でデザインを事前に作成してからコーディングしたものもあります。

使用した言語は Markdown、HTML、CSS のみです。 JavaScript も学習しましたが、元々のテーマに組み込まれていたもの以外に新しくは追加しませんでした。

確認作業

検証は Google Chrome の検証ツールを使用。また、拡張機能の Mobile FIRST も使用しています。

実機でもPC、タブレット、スマートフォン、手元で用意できる範囲での確認しました。

また、選手やサポートいただいた歌代さん、三上さんにも確認いただきました。

公開作業

ここの工程はまた別の記事でまとめる予定です。

Kotone Ohta