はじめに

　この記事は、以下の記事の続編です。まだ読んでいない方は、ぜひ先にこちらの記事をご覧ください。

プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！～企画～

この記事では、前回の内容を引き継ぎ、設計のまとめを記載します。

今回の目標

　前回の内容でいくつかの目標を掲げました。

　前の記事を読む

　今回の目標（フェーズ）は、
「 ①とりあえず、小さく素早く作成　
　→第一ステップで、企画・設計、開発をがんばるフェーズ」

　今回は技術にこだわらず、とりあえず作ることに重きを置きました。
上記の目標から、今回の開発では、迅速に開発を進めることを重視したため、設計書にこだわらずに進めました。

設計

技術選定

　・WordPress
　・サクラのレンタルサーバー

　技術選定の理由は、前回の記事にて記載しております。こちらの記事をご覧ください。

　前の記事を読む

今回作成したいシステム

　①TOPページ
　②着物についてのＱ＆Ａページ
　③着物作家さん紹介ページ
　④おすすめのお店ページ
　⑤記事（プログ）

画面遷移もどき

　トップページから、各ページへ遷移する。
　簡単な遷移方法にしました。

ワイヤーフレームの作成

　書籍で、WEBデザインを考える際にワイヤーフレームというものを作成する必要があることを学びました。

ワイヤーフレームとは

　最低限、ページに含める「画像」、「コピー」、「見出し」、「本文」などいの情報をまとめるもの。

ルール

　　・色使いはグレースケールで
　　・テキストの大部分はダミーで
　　・画像は「このくらい」というエリア指定

制作ツール

　Figmaでワイヤーフレームを制作してみました。

【トップページ】

【トップページ２】

【着物作家さん紹介ページ】

【他の画面のデザイン】

サーバーサイドエンジニアが挑戦するWEBサイトデザインの基礎

　正直なところ、仕事ではサーバーサイドを中心に担当してきたため、WEBサイトの画面デザインや構造については知識が不足していました。趣味やボランティア、友人の開発プロジェクトを手伝う際も、他のサイトのデザインを真似る程度で済ませていました。

そこで、今回は書籍で学んだWEBサイトデザインの基本をアウトプットしてみます。

基本のWEBサイト構造

ヘッダー

・サイトの象徴となるロゴ
・ナビゲーションメニュー
・検索フォーム

　ヘッダーは、サイトの第一印象を決める重要な部分です。ユーザーがサイト内をスムーズに移動できるよう、ナビゲーションメニューをわかりやすく配置します。

サイドコンテンツ

・お知らせ
・メインコンテンツの補助情報

　サイドコンテンツには、ユーザーにとって有益な情報やサイトの更新情報を配置します。これにより、メインコンテンツを補完し、ユーザーの興味を引き続けることができます。

フッター

・お知らせやコピーライト情報
・アクセスマップ

　フッターには、サイト全体に関する情報や連絡先、アクセスマップを配置します。また、コピーライト情報を明記することで、サイトの著作権を保護します。

これらの基本構造を理解し、実際のWEBサイト作成に活かしていきます。

重要な考え方

　導線まで意味づけされたレイアウトを作ることが大切
ユーザに体験してほしいストーリを考えてレイアウトをしていく

実際設計を考えてみて

　導線までの意味づけ、ユーザに体験してほしいストーリを考えてレイアウトとありますが、実際にWEBデザイン知識が乏しい。何を作りたいのかはしっかりあるけど、これでよいのか？ということがあります。まだまだ難しいことだらけです。

　余談ですが、私が好きなWEBデザインは、以下のサイト様です。
目指すところは以下のサイト様のように、遊び心があるデザインのサイトを作成できるようになりたいです。

高浜市やきものの里　かわら美術館・図書館

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
　設計は以上になります。
　設計時期は5月半ば～5月末まで実施しました。
　5月半ばは少し企画を考えていた時期とかぶります。企画を考えながら、できるかを設計で考えてました。

　次回、プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！～さくらのレンタルサーバー～

参考文献

いちばんよくわかるWebデザインの基本きちんと入門