はじめに
この記事は、以下の記事の続編です。まだ読んでいない方は、ぜひ先にこちらの記事をご覧ください。
プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！ ～企画～
この記事では、前回の内容を引き継ぎ、設計のまとめを記載します。
今回の目標
前回の内容でいくつかの目標を掲げました。
今回の目標（フェーズ）は、
「 ①とりあえず、小さく素早く作成
→第一ステップで、企画・設計、開発をがんばるフェーズ」
今回は技術にこだわらず、とりあえず作ることに重きを置きました。
上記の目標から、今回の開発では、迅速に開発を進めることを重視したため、設計書にこだわらずに進めました。
設計
技術選定
・WordPress
・サクラのレンタルサーバー
技術選定の理由は、前回の記事にて記載しております。こちらの記事をご覧ください。
今回作成したいシステム
①TOPページ
②着物についてのＱ＆Ａページ
③着物作家さん紹介ページ
④おすすめのお店ページ
⑤記事（プログ）
画面遷移もどき
トップページから、各ページへ遷移する。
簡単な遷移方法にしました。
ワイヤーフレームの作成
書籍で、WEBデザインを考える際にワイヤーフレームというものを作成する必要があることを学びました。
ワイヤーフレームとは
最低限、ページに含める「画像」、「コピー」、「見出し」、「本文」などいの情報をまとめるもの。
ルール
・色使いはグレースケールで
・テキストの大部分はダミーで
・画像は「このくらい」というエリア指定
制作ツール
Figmaでワイヤーフレームを制作してみました。
【トップページ】
【トップページ２】
【着物作家さん紹介ページ】
【他の画面のデザイン】
サーバーサイドエンジニアが挑戦するWEBサイトデザインの基礎
正直なところ、仕事ではサーバーサイドを中心に担当してきたため、WEBサイトの画面デザインや構造については知識が不足していました。趣味やボランティア、友人の開発プロジェクトを手伝う際も、他のサイトのデザインを真似る程度で済ませていました。
そこで、今回は書籍で学んだWEBサイトデザインの基本をアウトプットしてみます。
基本のWEBサイト構造
ヘッダー
・サイトの象徴となるロゴ
・ナビゲーションメニュー
・検索フォーム
ヘッダーは、サイトの第一印象を決める重要な部分です。ユーザーがサイト内をスムーズに移動できるよう、ナビゲーションメニューをわかりやすく配置します。
サイドコンテンツ
・お知らせ
・メインコンテンツの補助情報
サイドコンテンツには、ユーザーにとって有益な情報やサイトの更新情報を配置します。これにより、メインコンテンツを補完し、ユーザーの興味を引き続けることができます。
フッター
・お知らせやコピーライト情報
・アクセスマップ
フッターには、サイト全体に関する情報や連絡先、アクセスマップを配置します。また、コピーライト情報を明記することで、サイトの著作権を保護します。
これらの基本構造を理解し、実際のWEBサイト作成に活かしていきます。
重要な考え方
導線まで意味づけされたレイアウトを作ることが大切
ユーザに体験してほしいストーリを考えてレイアウトをしていく
実際設計を考えてみて
導線までの意味づけ、ユーザに体験してほしいストーリを考えてレイアウトとありますが、実際にWEBデザイン知識が乏しい。何を作りたいのかはしっかりあるけど、これでよいのか？ということがあります。まだまだ難しいことだらけです。
余談ですが、私が好きなWEBデザインは、以下のサイト様です。
目指すところは以下のサイト様のように、遊び心があるデザインのサイトを作成できるようになりたいです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
設計は以上になります。
設計時期は5月半ば～5月末まで実施しました。
5月半ばは少し企画を考えていた時期とかぶります。企画を考えながら、できるかを設計で考えてました。
次回、プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！～さくらのレンタルサーバー～