制作チーム「アトリエ∞（インフィニティー）」所属、グラフィックデザイナーのwachico.（わちこ）です。
今回の「おつD」テーマは、満を辞して！ 「アトリエ∞のホームページデザイン裏話」です！
まず、実際に運用中のページがこちら。まだまだ発展途上ですが…。
アトリエ∞（インフィニティー）｜グラフィックデザイン制作 ※外部リンク
私自身、HP制作については大学時代にほんの基礎を学んだ程度。実質ゼロから始めるサイト構築…。とても長い時間をかけて、方々からたくさんのアドバイスをもらって、右往左往手探りしながらやっとリリースに漕ぎ着けられた時には「ぃぃぃやったあぁぁぁできたあぁぁぁぁぁうわああぁぁぁぁぁぁぁぁぁ！！」…って叫びましたよね。こればっかりは仕方ないですよね、うん。
それはそれとして…今回は、Wordpressを使ったサイト構築手順について、実際の制作過程を追いながら自分の分かる範囲でご紹介してみます。この記事を通して「初心者でも何とかなる！」っていう感覚が伝わればいいな、と。備忘録的な内容なので、役に立つノウハウやテクニック解説とかはありません（正直）。
ちなみに今回、Wordpressサイト構築についてある程度の予備知識がある前提で書き進めていきます。未読の方は前回「WordPressのおつまみ。」からお読み頂けますと幸いです。なお、あまり参考にはなりません（ド正直）。
もくじ
【1.「設計図」は大事！】
【2.サイトマップを作ってみよう！】
【3.コンテンツを用意しよう！】
【4.デザインを整えよう！】
【まとめ】
【1.「設計図」は大事！】
WordPressでホームページやブログを作るにあたって、まず絶対やってはいけないと思うことがあります。それは「いきなりWordpressを触る」こと。
ホームページ作りは、いわば「家づくり」と同じ。自分が長年住むことになる家を、設計図も図面もなしに、手当たり次第思いつきで作ってしまったら？ 必要なコンテンツが必要な場所に整頓されていないと、今後の運営や更新作業が面倒になってしまうばかりか、お客さんからも「見づらい」サイトになってしまいます。
だからこそ、まずノートやメモに設計図を書き出し、整理し、どう運営していくか見当をたてておくのはとても大事なことです。
この順序、よく考えると「デザイン」の手順そのものですね。いきなり本番に行かず、アイデアを出してイメージを固め、ラフを描くところから始める。何事も最初が肝心、ということでしょうか。
さて、どんなサイトが作りたいか決まったら、サイトに載せたいものをどんどんリストアップします。今後増えることもあるでしょうが、ひとまずメインコンテンツを決めて、それを最大限「魅せる」ために必要なものを考えます。
アトリエ∞HPは、例えるなら「展示会の会場」みたいな役割を目指しています。過去の作品（実績）を記録し紹介すること・それによって顧客を獲得し案件に繋げること、この2つを大きな軸としています。よって、実績内容を見てもらいやすくする工夫が必要。商業目的のサイトでもあるので、集客動線はなるべく具体的にイメージしておくことを心がけました。
「このサイトについて」や「お問い合わせフォーム」など、サイト運営上必須なコンテンツもお忘れなきよう。その辺りは、実際にお手本にしたいサイトを見つけて参考にするといいかもです。
【2.サイトマップを作ってみよう！】
載せたいものが決まったら、いわゆる「サイトマップ」を作ってみます。サイトを構成するページ同士がどう繋がっているかを表したものです。
画像を見ていただくと何となく分かるかもですが、実はこのサイト、初期ラフスケッチ段階では「ミューズ明石クロノス」のHP内へ「コンテンツ」として追加する、といった予定でした。諸般の事情から、この後に「独立したサイト」として一から構築する方針に変わっていきます。
サイトマップまで決まったら、手書きでもデジタルでもいいので「こんな見た目のサイトにしたいな…」という簡単な図（ワイヤフレーム）を描いてみます。ここにメニューがあって、色はこんな配色で、文字の大きさはこのくらいで…、といったイメージを大まかにでいいので固めてしまいます。
この辺りから、少しづつWordpress自体にも触れていきます。定石だとまずローカル上に試験環境を構築し、それをWebに公開するやり方が安全なのでその方法から書くべきかと思いますが、そうすると説明がいよいよ複雑怪奇になるのでこの辺も割愛させていただきますね（「Wordpress ローカル テスト環境」などの単語で検索すれば出てくるかと思います）。
まずWordpressには「テーマ」というものがあります。これはいわば「サイトのテンプレート」で、カスタマイズすることで自分なりのデザインを仕上げます。自作テーマを用いるなどこだわったことをしない限り、まずはこの「テーマ」選びから。無料のものだけでも星の数ほど見つかります。
たいていはテーマのサンプルサイトが公開されていますので、それを見て「自分の作りたいサイト」のイメージに近いものを選べばよいかと思います。ただ、決めるときは慎重に。前回の記事でも触れたように、「頻繁に更新されている」「書籍やWeb上で評判がいい」など、セキュリティ面も考慮した選び方をしたいところ。
ご参考までに、アトリエ∞で使用させていただいているテーマはこちら。
Ashe Blog – Free Version ※外部リンク
海外製のテーマなのですが比較的高い人気があり、更新頻度も高く、ワイヤフレームのイメージにも近いデザインだったため選択。有料版も提供している、という点も個人的には信頼が持てました。
【3.コンテンツを用意しよう！】
ここからはいよいよ、Wordpressにコンテンツ（ブログでいう「記事」など）のページを組み込んでいきます。
まずはテーマを少しカスタマイズして、ある程度ワイヤフレームのイメージに近いデザインを作っておきます。いきなり完成形に持っていってからコンテンツを入れる、というのは逆に効率が悪いと感じたので、コンテンツを増やしながらテーマも少しづつ手直しするようにしました。
ページ自体は主に「ブロックエディター（Gutenberg）」と呼ばれる画面で作成していきます。「隅々まで使いこなそう」と思うと大変ですが、よくある文書作成ソフトを思わせる操作感になっているので、基本部分ならそこまで難しくないかと。逆にコーディングを主とした、従来のサイト構築手法に慣れている人ほど取っ付きにくいかも…？
ページの種類は「投稿ページ」「固定ページ」の大きく2つ。アトリエ∞HPの場合は、更新頻度の高い各作品のページなどメインコンテンツを投稿ページで、更新頻度がそこまで高くない「ABOUT」「CONTACT」などを固定ページで、と言う感じに各コンテンツの棲み分けをしています。
投稿ページで更新した記事は、新しいものから自動的にトップページのスライダー部分に表示されるという仕組み。これは新しい情報にアクセスしやすくするだけではなく、簡易更新履歴という役割も兼ねています。
【4.デザインを整えよう！】
コンテンツの実装がある程度進んだら、上記作業と並行しつつデザインを整えていきます。
ここまで来たら必要なものはほぼ揃っていますので、それをHPの体裁になるよう組み立てて、テーマカスタマイズやCSS（サイトの見た目を変えることに特化したWeb言語）などを駆使しつつ、レイアウト（見た目）を細かく調整していくのみ。…とは言えこれがなかなかとんでもない大仕事。
その具体例として、結構苦戦したメニュー部分の調整過程をひとつ。
本音を言うとこれでもまだ中途半端というか、やりきれていないと思っているんですが、今の自分の技術力だとこれ以上は頭がパンクしちゃいそうだったのでこの辺りで妥協しました…くそぅ。
この際、レスポンシブデザイン（PC、スマホ、タブレットなどあらゆる端末でのレイアウト表示を自動的に切り替えるようにし、閲覧しやすくすること）も意識しておくとなお良いです。（テーマによるかもしれませんが）テーマカスタマイズ中に各端末での見た目に切り替えて確認できるので、そこはかなり便利だと感じました。
【まとめ】
はい、お疲れ様でした。結局かなり実践的なお話になってしまいましたが、これが最低限Wordpressでサイト構築する際の流れと思ってください。勿論あくまで私なりの、ではありますが…。
前にどこかの記事で呟いたかと思いますが、Webサイトはリリースすれば終わりというものではなく、常に成長を続けるものです。リリース＝ゴールではなく、スタートなのです。
まだまだ足りないところが多い場所ではありますが、今後様々なコンテンツやインフラ的要素を整備して、よりしっかりとしたサイトにできるよう邁進していく所存です。どうか長い目で、暖かく見守っていただければと…願わせてください、はい。
最後に、繰り返しになりますが私はWordpressを知ったのも、触ったのも、弊事業所に入所してからでした。これからWordpressを使ってみたい、仕事にしたいという方がいらっしゃいましたら、お気軽にお問い合わせフォームからご連絡くださいませ。け、決してこ、心細いからとかそういうんじゃないですなんでそんな！ ひどいこと！ 仰るんですか！！（既視感）
次回の内容は相変わらずさっぱり決まってないのですが…さて、どうしましょうね。今回が結構ガッツリだったので、軽めの話題で何か思いついたらいいですね。うん。
ここまでお読み頂きありがとうございました。
それでは、次回をお楽しみに！
※参考書籍：WordPress標準デザイン講座 20LESSONS【第2版】（Amazon） ※外部リンク
2023.5.30
Follow me!
コメント