サイト制作のポイント・まとめ（1）Webサイト設計・デザイン
事業用サイト制作「CREATE ACCORDウェブサイト＆ブログサイト（PURPOSE/パーパス）」で参考にしたページなどをまとめました。
これを見ながらWebサイトが作れる…とまでは言いませんが、困ったときはここを見れば答えやヒントが見つかると思います。参考になりましたら幸いです。
今回は、ホームページ制作の前に行った方が良いWebサイトの設計とWebサイトデザイン（特に配色周り）についてまとめました。
Q.何故ホームページ制作前にサイト設計を行うのか？
そのまま作り始めた後、完成したサイトを見て「あれ、何か違う…」または「何か使いづらいな…」と思うことはありませんか？
目的の達成のために作ったホームページなのに結果が出ていないと思うことはありませんか？
ホームページを作るとき、以下の内容は一例ですが、
- 目的を定める（例：お問い合わせ数の増加）
- ターゲットを設定する（例：20～40代の女性）
- 必要なページを洗い出しする（例：トップページ、サービスページ、会社概要、お問い合わせ、プライバシーポリシー、サイトマップなど）
- 記事を書くとき、何をテーマに書きたいか？
- 誰が更新していくのか？
- 年間にかけられる予算はいくらか？
このように、何が必要なのか何に向けて作成するのかを考えることで、制作した後にお悩みが多数発生してしまうことを防ぐことができます。
自分で考えるのが大変…という方は、メインサービスである「Webコンサルティング・SEO」または「Web技術サポート・Webコンテンツサポート」をご利用ください。
サイト設計の参考にしたページ
私は「Webコンサルティング」「SEO」が競合サイトになりますので、競合他社のページで参考になりそうなサイトをいくつかピックアップして見ていました。
その他、同じフリーランスのWebサイトも確認していました。（主にコンテンツの区切りの参考とロゴ・屋号の意味の説明の参考に見ていました）
汎用的に使用できる情報ではないため、ここではURLを省略いたします。
（Webコンサルティング・SEOに特化した参考リンクをまとめた記事が別でありますので、そちらで紹介します）
競合他社または検索上位にあるページは、検索上位になる理由があります。
パクリにならないように気をつけて、自分なりに吸収して、より良い情報を提供するように努めましょう。
サイト設計・ワイヤーフレーム編
サイト設計自体は、独自のフレームワークで対応したのですが、まだまだ改良の余地があるような状態です。そのため、ここではサイト設計の簡易的なポイントのみ記載します。
- 「何を伝えたいのか」を決めます（「ユーザーが何を欲しているか」から決めた方が良いのですが、ものすごく難しいので、何を伝えたいのかを先に決めます）
- 需要を調べて需要に合わせるようにキーワードやメインテーマを調整します（伝えたいキーワードをGoogle検索に入れて件数や可能であれば月間検索ボリュームを調べます）
- ドメイン（URL）を決めます
- サーバーを決めます
- 必要なページをリスト化します（例：トップページ、カテゴリーページ、検索ページ、記事ページ、プライバシーポリシーページ、サイトマップ、お問い合わせフォーム）
- ターゲットイメージを決めます
サイト設計の簡易的なポイントの実践でお困りの方は、メインサービスである「Webコンサルティング・SEO」または「Web技術サポート・Webコンテンツサポート」をご利用ください。
テキスト（文章・原稿）を書くとき
アクセシビリティに気をつけて書こうね！
最上級表現にも気をつけて書こうね！
Figma (注)ワイヤーフレーム作成ツールとして利用
Webサイトデザインも含めて作ろうとしていたので、Figmaを選んだのですが、結局ワイヤーフレームを作り終えた段階で「このまま実装した方が良いな」と気づいたので、ワイヤーフレーム作成止まりでしたが、作りやすかったので紹介しています。
Figmaテンプレート
この中にある「Wireframe kits」を使ったのですが、最終的に自由に作り出したので、あまり使ってないかもしれません……。
SWELL公式サイト
今回はWordPressテーマ「SWELL（制作者：株式会社LOOS）」を使って作成することもあり、主に「ここにあるものは実装可能」の判断をするために見ていました。
デザイン・素材編
WordPressのテーマを使う場合、デザインはある程度決まっているため、新しくデザインを作ると大変だと思います。
保守管理、運用の観点から、WordPressテーマの仕様に合わないカスタマイズは推奨しておりません。
コンテンツ制作に対して画像は必要不可欠なので、自身で図を作成または撮影するか、商用無料で使える写真素材を規約の範囲内で加工するなどで、「自身のコンテンツ」だと言えるよう、オリジナリティを出しましょう。
素材サイトの利用規約違反にならないように、利用規約を確認してからご利用ください。
フリー写真フォトックPhotock
私は「北海道札幌市のSEOフリーランス」のため、札幌市の画像を使いたくて、ここから選んで使いました。
アイコン素材ダウンロードサイト「icooon-mono」
No Image画像用のアイコン素材として「カメラのアイコン素材6」を選びました。ほかにもシンプルな素材が多いので、色々なホームページ制作でも愛用しています。
無料（フリー）イラスト「SOZAI GOOD」
背景画像やパーツで写真がないけどイメージとして分かりやすいものを使いたいときに、とても便利です。
フレーム「Frame illust」
スライドの背景（枠）として使用したくて探しているときに見つけたサイト。
商用利用可能な写真フリー素材「フリー素材.com」
画像を提供してもらったので最終的に使わなかったんだけど、今まで知らなかったサイトだったので。フリー素材は使い方考えないと「あ。これフリー素材だ！」ってすぐに分かっちゃうので多用はしたくないものの、毎回ちゃんと画像を提供してもらえるわけでもないし、フリー素材はプロの方が提供しているだけあって品質が良いので、効果的に使っていきたいところ。何より無料というのが有り難く…！
フリーイラスト素材集「ちょうどいいイラスト」
今回の事業用サイトのリニューアルのときに大変お世話になったイラストサイトです。
配色ツール1「配色の見本帳（色検索）」
最近（2022年12月頃）見つけた配色ツール。
「配色の見本帳（色検索）」のすごいところは、彩度・明度による配色の他、色を体現化するときに用いる方法の一つである『色相環（しきそうかん。色相を環状に配置したもの）』の位置による組み合わせの配色を紹介してくれるところ。ここから選ぶだけで済むので、配色に自信がない人にとってはとても優れたツールだと思います。
メインカラーだけは決められる人にとっては有り難いツールだと思います。
私は配色といいますか、色決めが本当に苦手でして……。
ブランドカラー（メインカラー）は分かるものの、他のカラーについては、自信を持って選ぶことが中々できず……。
仕事の場合は、お世話になっている本職のデザイナーに頼っているのですが、事業用サイトは私個人のため、依頼費用の都合もあり、頼るわけにもいかないので困り物です。いつかは個人のことでも気軽にデザイナーにきちんと依頼できるようになりたいものです。
配色ツール2「Encycolorpedia」
配色ツール1「配色の見本帳（色検索）」を使うまで使っていたツール。色検索よりも情報がシンプルにまとまっているのと、『色のバリエーション』『名前付き色』がとても参考になり、この中から気になる色を指定することで色の雰囲気が離れすぎないので助かっています。こちらもメインカラーが決まっていれば有り難いツールとなるでしょう。
カラーパレットジェネレーターサービス「Palx」
今回、新しく見つけたツールです。
「この色を薄くしたい（背景色に使いたい）」というときにお世話になりました。
色のコントラストチェッカー
ページ表示速度チェックツール「PageSpeed Insights」ですが、このツールはページに関する総合的なチェックに役立ちます。
この「PageSpeed Insights」でチェックしたときに「背景色と前景色には十分なコントラスト比がありません」されてしまったときに使ったツールです。
色のアクセシビリティを自分できちんと計算できるわけじゃないので、重宝しています……。
色の調整用
本来は色のコントラストチェッカーなのですが、色の調整ができるのが有り難い。
使いたい色がNG判定出てしまったとき、「同じ色味で、ちょっと変えればOKになりそうなのに…！」というときに便利だと感じたツール。
最終的に「配色の見本帳（色検索）」で良さげな配色パターンを探したので使わなくなったけど、ちょっとした変更で済ませたいときは本当に重宝しそうです…！
NEXT→WordPressインストール編 or WordPressカスタマイズ編
「WordPressインストール編」に続きます！
クリエイトアコード（夜空きり）では手動でWordPressをインストールすることをオススメしています。工程が多くなること、難しいと感じることもありますが、セキュリティ対策にも繋がるので、頑張ってみてください！
「自動インストールが良い！」という方は「WordPressカスタマイズ編」に進んでください。
関連記事
ご相談・お問い合わせ
ホームページ制作・リニューアル・運用・SEO・Web集客、Webマーケティング・Webサイト制作技術・タスク・スケジュール・プロジェクト管理や業務改善のお悩みなどを遠慮なくご相談ください。
資料ダウンロード
サービスのご利用を社内で検討したい方のために、実績やサービス概要、料金表などのクリエイトアコードの案内資料をPDFでダウンロードすることができます。ご自由にダウンロードください。