Wordpressテーマ開発その1(準備編)

今までいくつか案件をやっていきましたが、やはりホームページのコーディングは圧倒的にWordpressが多いです。他のCMSはまだ当たったことがないです。
で、実際自分でこういったブログなどは1から作ったり、Udemyを見ながらテーマ作ったりしてはいたのですが、実際の開発だとやっぱり難しかったのです。。
今でも怪しいところがありまくるのですが、多くのホームページにあるような、固定ページ、カスタム投稿、ブログ投稿などを入れて、且つユーザーがわかりやすい管理画面になるように、テーマ開発をしていこうと思います。今回はデザインまでをざっくりと。

設計していきます

夜系のお店（キャバクラやラウンジ）特有の内容を盛り込みたかったので
必要な内容を洗い出します。

トップにお店の外観などのイメージをスライダーで配置する。
ナビゲーションバー（ヘッダーメニュー）
クライアントが管理画面から更新できるお知らせセクション（既存の投稿機能）
どんなキャストがいるのか顔写真をスライダー表示させるセクション（カスタム投稿タイプ）
お店のシステム説明（金額など）固定ページは作らず、トップページにそのままコーディング
お店の住所と地図をgoogle埋め込み、トップページにそのままコーディング
固定ページに採用ページを作る（ヘッダーのリンクから飛ぶ先。採用ページや夜系店には特に重要）
フッター（ほぼヘッダーと同じ作り。copyrightなどをつける）

必要な項目がどこに当たるのかを考えながら組み立てていきます。いくつかのサイトを参考にしながら上記の項目を作りました。

クライアントがパソコンが苦手でもわかりやすく更新ができるように
利用者が知りたい情報（キャスト、金額設定、場所）がわかりやすいように。

と、この点を意識することにしました。

デザインツールでデザインする

レスポンシブはiphoneXでタブレットサイズはめんどくさいので作ってません。
こんな感じでデザインしました。ちなみにデザインは苦手なので頑張ってもあまりおしゃれにはならんかった、、。
もうちょい装飾なんかを増やしても良いでしょう。
フォントサイズとかざっくりなのでおそらくコーディングの際に不具合出てきたら調整します。
デザインカンプは私的にはXD使いやすいなあと思ったんですが、実際案件いただいた時はほとんどPhotoshopでした。
もしかしたらデザイナーさん的にはフォトショの方が表現しやすいのかなー？と思ったりします。
私はデザイン素人なので、扱いやすいXDで。

デザインを作る上で意識したこと

各見出しはmarginなどを統一させる。
色味を絞る
情報を盛り込みすぎない（詳細ページに飛ぶようにする）
お店のイメージやコンセプトカラーを元に。（今回は黒とゴールドで高級感を）

本当はもっとやるべきことはあると思うのですが、今回はワードプレスの開発自体が目的なのでデザインのおしゃれ具合は一旦脇におくことにしました。（デザイン難しい）

ある程度構成、設計ができているとあとは載せていくだけなので割とサクサク進みます。
競合となるようなサイトを見て研究もしてみると面白いです。
XDは直感的に触れるのでこれくらいのデザインをするのは簡単なのですが、やっていくとめちゃくちゃ便利な機能もいっぱいあります。（使いこなせてないけど）デザインの仕事をするのであれば使えると便利だと思います。

Adobe XDではじめるWebデザイン＆プロトタイピング一歩先行く現場のスキル

posted with ヨメレバ

松下絵梨翔泳社 2020年05月29日頃

楽天ブックス

Amazon

Kindle

まとめ

デザインはとにかくいろんなサイトを見ること、、とも言われましたが、やっぱり慣れてないのもあって実際作るのは難しいです。
クライアントによって求めているものも違うし、ツールが使えるからうまくいくわけではないのでWebデザイナーさんはとっても大変だなと思います。
今回のように自分でコンセプトやらを決められるのは自分で完結するのでいいですが、だいたいホームページというのは見ていくと入っている中身はだいたい共通していくので、人気のお店や、自分がユーザーだったらどんなサイトがいいなと思うのか（または行ってみたいと思えるのか）なんかの感覚を養いながらデザインに活かしていければいいのかなと思ってます。実際の業務だと相手の意向をくみ取ったりしていくのが必要かと思うので、実はヒューマンスキルが結構いる気がしますね。
また開発を続けていきます。その２に続きます。

コンバージョンを上げるWebデザイン改善集