Original

ホームページ初心者の現役女子大生がOne Pageでサークル紹介ページを作ってみた

はじめまして! 今月からOne Pageでインターンを始めました、大学4年の黒瀬奈奈子です。
​​​​​​​
大学では文学部に通い、生活の中心はサークル活動やアルバイトという、バリバリ文系生活を送ってきました。Web制作には縁がなかったため、まだまだ右も左もわからない状態ですが、今はOne Pageについて勉強中です。

ところで、サークル活動に力を入れている大学生の皆さん。あなたのサークルは自分たちのホームページを持っていますか?
「SNS運用はやっているけれどホームページは持っていない」、「何年も前に作ったまま放置している」という場合も多いのではないでしょうか。

新歓や対外活動のために、意外と重要になるのがホームページ。サークルの情報が1ページにまとまっていると、信頼できる団体だという印象を持ってもらえますになります。

そこで今回はOne Page超初心者の私が、無料で簡単にサークルの紹介ページを作ってみようと思います!

目次

STEP1:ページを制作し、テンプレートを決定する
・「OnePage」への登録
・新規ページを作る
・利用シーンの選択
・テーマの選択
STEP2:テンプレートを編集する
・ページの編集画面の基礎知識
・見出し、テキスト、イメージ画像の変更
・パーツの入れ替え・非表示
・セクションの削除
・セクションの追加
STEP3:公開

STEP1:ページを制作し、テンプレートを決定する

今回はここから、フットサルサークルのホームページを作っていこうと思います。
サークルではインドアな活動ばかりしていた私ですが、フットサルで友情を深めるキラキラした青春への憧れを胸に、頑張って作ってみます!

One Pageへの登録

今回は、「One Page」というサービスを使ってホームページを作ります。
”テンプレートを選択し、パーツをドラック&ドロップではめ込むだけの簡単操作” が特徴です。PCさえあれば、新たなソフトをインストールする必要もありません。

サービスサイトの右上の[新規登録]ボタンから会員登録をすることで、サービスが利用できます。

One Page

新規ページを作る

会員登録を済ませると、次のような画面に移ります。右上の「ページを新規追加」をクリックし、さっそく作ってみましょう。

利用シーンの選択

One Pageには20種類の利用シーンが用意されており、作りたいページに応じてテンプレートを選べるようになっています。今回は「活動の紹介をする(サークルや団体向け)」を選択しました。

テーマの選択

利用シーンを選択したら、次はテーマを設定します。カラー、デザインが異なる20種類から選択できるため、プレビューを確認しながら、好みのテーマを選択しましょう。後から変更することも可能です。


STEP2:テンプレートを編集する

ここまでの設定を行うと、下のような編集画面が表示されます。

ページの編集画面の基礎知識

編集作業の前に、OnePageのページの構成を確認しておきましょう。
まず、ページ全体は大きく3つの要素で構成されています。

最上部には、ロゴ・ナビゲーションエリアがあります。ロゴとナビゲーションの表示の有無は、編集ページ左のメニューの「レイアウト設定」から変更できます。団体のロゴマークやホームページの説明を最上部に入れたい、という場合はここから設定しましょう。

そして主に編集することになるのが、コンテンツエリアです。
ここは「セクション、行、カラム」という3つによって構成され、そこに「パーツ」が埋め込まれています。

例えば上の画面では、青い枠で囲まれた部分がひとつの「セクション」となっており、4つの「行」によって成り立っています。

それぞれの行に
・見出し(◯◯大学公認◯◯サークル)
・テキスト
・イメージ、テキスト、ボタン
・ボタン(お問い合わせ)
といったパーツが埋め込まれています。ページの編集画面の基礎知識について、詳しくは以下の動画やヘルプページからも確認できます!

ページの編集画面の基礎知識についてのヘルプはこちら

​見出し、テキスト、イメージ画像の変更

セクション・行・カラムはテンプレートですでに配置されているため、パーツを編集するだけでオリジナルのホームページを作ることができます。

まずは見出しやテキストを変更していきます。テキストは簡単に編集できます。サイズの変更なども可能です。

画像が設定されている行には、画像を埋め込むことができます。サークルの集合写真など、雰囲気をアピールすることのできる画像をアップロードしましょう。


パーツの入れ替え・非表示

テンプレートで設定されているセクション内のパーツを削除することはできませんが、パーツの位置を入れ替えたり、パーツを非表示にすることができます。
目のアイコンで表示・非表示を切り替えます。
また、矢印のアイコンで場所を入れ替えます。

今回は問い合わせボタンが必要ないため、ここから非表示にしてみます。

またパレットのアイコンからは、背景などを細かく設定することもできます。


セクションの削除

セクション内のパーツは非表示にすることもできますが、セクション自体が不要であれば丸ごと削除することも可能です。

今回はこのセクションが必要なかったため、セクションにカーソルを合わせ、左上に表示される赤いゴミ箱マークから削除しました。


セクションの追加

テンプレートに存在しないパーツを追加したい場合は、セクションを新たに追加する必要があります。今回は、これを活用してMAPを追加します。
新たなセクションを追加したい場所にカーソルを合わせ、「セクションを追加」を選択すると、次のような選択画面が表示されます。

自由にパーツを組み合わせたい場合は「空白のセクション」を選択します。
今回はMAPを組み込みたいため、「アクセス1」を選択しました。



STEP3:公開

完成したら、さっそく制作したページを公開してみましょう。
編集画面左上の「公開」ボタンを押し、ページを公開に切り替えます。編集内容を反映させるため、右上の「更新する」をクリックすれば、公開は完了です。
公開↔非公開ボタンの隣、「新しいページ(1)」にあたるところをクリックすれば、公開されているページを確認できます。


今回制作したページは、このようになりました。
私にとっても初めて制作したページですが、とても簡単に、感覚的な操作でここまで作ることができました。



いかがだったでしょうか? One Pageを使うことで、サークルの紹介が簡単にできるだけでなく、新歓期に新入生を集めるためのページを作ることや、イベント開催のお知らせページを制作することもできます。

ぜひ、今後のサークル運営や大学生活に活用してみてください!

No image

黒瀬奈奈子(クロセ ナナコ)

都内の大学に通う大学4年生。現在One Pageでインターン中!

無料ホームページ作成ツール「One Page」

One Page(ワンページ)は400種類以上のデザインとドラッグ&ドロップの簡単操作により、たった3ステップでホームページを作成することができるツールです。

◆One Pageの特徴
・自由に使える豊富なフォントや画像素材
・コンテンツを考える時間を削減する例文テンプレート
・海外向けのページも作成できる多言語対応機能
・お問い合わせ管理ができるフォーム機能
・初めての方でも安心のチュートリアル

無料から始めることができるので、集客用のページが必要だという方はぜひ一度ご利用ください!

人気記事ランキング

タグ

アーカイブ

ユーザー向け記事一覧

登録番号 IA180169  適用規格 ISO/IEC 27001:2013 / JIS Q 27001:2014