Webサイト作成01
はじめに
学生団体のwebサイトをが結構古いのでリニューアルしたいと考えている。そこで、作るにあたって、最初にWebサイトをつくる手法を考えつつ、記録として残しておこうと思う。
Webサイト作成にあたって-手法
Webサイトを作るに際して、どうやって作るか？
1.ゼロからコードを書く
2.CMSの活用
3.Webサイト作成ツールの利用
1ゼロからコードを書く 難易度☆☆☆
メリット：自由度が高い、プログラミングスキルの向上
デメリット：HTML/CSS/jsの知識が必要、学習コストが高い、時間がかかる、サーバー・ドメインが必要
2CMSの活用 難易度☆☆
メリット：Webページの作成や公開が簡単にできる、テンプレートがあるなど
デメリット：セキュリティのリスク、ロードの遅延
3ホームページ作成ツールの利用 難易度☆
メリット：プログラミングスキルがいらない、テンプレートがあるなど
デメリット：セキュリティのリスク、ロードの遅延
コードの記述-開発手順
今回は小規模開発、およびプログラミングスキルを身につけたいのでゼロからコードを書いていこうと思う。そこで、開発手順を確認していく。
- STEP0:リサーチ
- STEP1：レイアウトを設計する
- STEP2：設計をもとにコーディングする
- STEP3：正常に動くかテストする
- STEP4：作成したサイトを公開する
STEP0:リサーチ
参考にしたいWebサイトのリサーチ
・
・
・
STEP1：レイアウトを設計する
ワイヤーフレームワークの作成
↓
ビジュアル要素を選定して、デザインカンプ（仕上がりを示すために作られる完成見本）を作成
- 色
- フォント
- 画像
STEP2：設計をもとにコーディングする
- HTML
- CSS
- JavaScript
- 必要に応じてPHPやPythonでバックエンドの開発
STEP3：正常に動くかテストする
- Webサイトのデザインがレイアウト設計通りになっているかを確認
STEP4：作成したサイトを公開する
- サーバーに作成したHTMLやCSSなどの資材をアップロードし、ドメイン名を設定
STEP0:リサーチ
- 株式会社ワンキャリア
スタイリッシュできれい、トップページのアニメーションがあるというのが似ている
- ベクスト株式会社
アニメーションがかっこいい
STEP1：レイアウトを設計する
1Webページに必要な情報をピックアップ
- topのアニメーション
- メンバー
- 活動履歴（作品紹介）
- 連絡先/お問い合わせフォーム
- 活動コンセプト
- インスタリンク
- topページ
- ブログ？
2情報の優先順位を決める
1でピックアップした情報の優先順位を決め、どのページを上部に表示させるか判断する。重要なページはトップページなど上層に配置する。
このようなページ配置を「階層構造」という。Webサイトの構成設計は構成図（サイトマップ／サイトツリー）の作成が効果的。
TOPページ
|
活動コンセプト-活動履歴-メンバー-ブログ-お問い合わせフォーム-インスタリンク
3レイアウトを決める
ワイヤーフレームワークを作成する
- Figma使う
4システムの設計
HTML、CSS、javaScriptを使う。
- jsはフレームワークを利用する？
フレームワークのメリット
フロントエンドフレームワークは、Webアプリの機能性とインタラクティブ性を高めることに重点を置き、フロントエンドを開発するための基盤として機能します。このフレームワークは基本的なテンプレートとコンポーネントを提供し、開発者がユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）を設計しやすくします。
今回は小規模開発なので、vueを使うかな。
メリット：
- 習得が簡単
- 高速パフォーマンス
- 再利用可能なUIコンポーネントの構築に適している
- 規模が小さい
デメリット： - 他のフレームワークと比べてコミュニティが小さい
- サードパーティのライブラリのエコシステムが限られている
5デザインコンセプトの設計
- デザインの方向性をまとめたテキスト
- メインとなる色のルール
- フォントのルール
- 画像素材などの方向性のルール
- レイアウトの大まかなルール
- 共通するパーツルール
6デザインカンプの設計
デザインコンセプトにそってビジュアル化。
Discussion