2025/11/21 サークルHP制作の流れ例
t6o_o6t.icon
進め方の例を示してみます。
内容は t6o_o6t.icon が独自に書いたものであり、必ずしも参考にする必要はありません。
情報を伝える相手は誰なのか？
1. 本大学への入学を検討している高校生のうち、サークルに関心を持っている人。このサークルの雰囲気と活動内容・頻度などの基本的な情報を知りたいと考えている人
このような人は、大学の公式 Web サイトのリンクや Twitter を通して流入してくる可能性がある。
2. このサークルに強い関心をもち、具体的な活動内容に関心がある人
このような人には、このサークルでこれまで製作したものや、技術スタックなどに関心があるかもしれない
どのような情報が必要なのか？
サークルに入ってみるか考えている人にとって、次の情報は重要なはず...
Q. サークルと自分がマッチしているかどうか知りたい
学年の構成はどうか
初心者 / 熟練者はどれくらいの割合なのか
どのような技術を扱っているのか
何を目的にしているのか
大会などでの成績？
サービスの運営？
部費を徴収するのか
活動時間帯はいつなのか（拘束時間は多くはないか）
Q. 参加しやすい雰囲気がどうか知りたい
1年生メンバーの声
ほかにもあると嬉しい
必要な情報を整理する
情報を階層的に整理してみます。
CIST IT COMMUNITY とは
サークル名 / ロゴ
サークルの概要説明
チームの概要
Unity チーム
メンバー編成: 1年生 ○ 人 / 2年生 ○ 人
イメージ画像 数点
説明
アプリ開発 チーム
沿革
リンク
コンタクト
メンバー一覧
ブログ
制作物紹介（準備中）
デザインの前の準備
考えたいこと
サークルのコンセプト（ブランディング）がもっとも的確に伝わるビジュアルはなにか。
トーンマナー
タイポグラフィ
レイアウト
どのように情報の優先度を付けるのか。
行うこと
Web デザインの事例を調べる
伝えたいコンセプトを言語化する
IT 技術に対する強いこだわり、貪欲さ
硬派なイメージ
トーンマナーの策定
色
サークルロゴと同様に、グレースケールで統一する。
基本的には黒（# 111）と白（# ddd）を使用する。
はっきりとした明暗を用いることで、こだわりの強さを表現したい。
アクセントカラーとして、部分的に水色を使用する。
レイアウト
タイポグラフィ
ゴシック体を用いることで、硬派なイメージを表現したい。
文体
高校生に対して硬すぎる印象にならないよう、です・ます調で統一する。
ただし、横文字などは避けずに使用し、柔らかすぎることないようにする。
3. 書くべき文章を用意する
レイアウト時に使用します。
概要説明
CIST IT COMMUNITY は、公立千歳科学技術大学が公認する情報系サークルです。
Unity チーム
ゲーム開発ツール「Unity」を使ってゲームを開発します。
まだこの世にないユニークなゲームを作り、大学祭で試遊していただくことを目指します。
アプリ開発チーム
4. 画像を準備する
Google ドライブに画像があるので、探してみる（顔が特定できないように）
レイアウトの決定
要件
スマートフォンとタブレット・PCで、画面レイアウトが変化する。
今回は高校生が利用することを想定したため。
階層的なナビゲーションによって、セクション間を移動できる。
取り扱う情報が複雑なため。
スマートフォンでの画面