BLOG

ブログ

WordPress独学者

当初よりカラーの事業を別名にしようかどうか悩んでいたのですが、やはりついグラフィックとカラーの二本柱を同名でするのは、限界があると感じ(どうしてもグラフィックのイメージが強くなるので)、今年から別名で開始することにいたしました。

それを機に、カラー事業Myroのサイトを立ち上げようと思い、ターコイズデザインは、有料のテンプレートで制作。ならば、Myroのサイトは、無料のテンプレートでどこまでできるか試してみようと思い立ち、制作しました。

昨年からこのサイトをワードプレスで制作してから、昔HTMLでサイトを作っていたことを思い出し、その時の文字の羅列でひとつの作品が作れる好奇心を抑えることができずに、寝る間も惜しんで制作しました(笑)。

さて、ワードプレス独学者がどこまで作れたかは、こちらのサイトでご確認ください。

https://myro.turquoise-design.com/

サイトを構築する

まずは、設計図を作ること。デザインにおいても設計図が一番重要です。
常に情報整理をしているのでこの点は、サクサクと制作可能。 サイトマップ制作には、こちらのアプリを利用しました。

Xmind
フィッシュボーンやマトリックスの利用にも最適なので、思考をまとめる清書用にひとつあると便利です。iPad用もあります。

一番時間を費やしたこと

テンプレートを選ぶことが一番時間を費やしました。1日は、見てたでしょうか。

最初に読んだのは、こちらの有名なワードプレスの教科書。

基本が学べます。最初にワードプレスの成り立ちや流れを学ぶには、さすがベストセラーにもなる教科書。
常に基本を吹っ飛ばして応用から入ることがある私ですが、回りに回ってまた、またここにたどり着きました。

しかし、グラフィックデザイナーに携わる人間としては、かゆいところに手が届かない。
ぶっちゃけ、レイアウトが気に入りませんでした。

そして、次に手にとった本がこちら。
いきなりコードから入りました。

この間に入るべき、教科書があったと思うのですが、
見た目に惹かれて。

案の定、途中で挫折しました。
しかし、得るものがたくさんありました。

ファイルやコードの書き方、並び方です。

HTML製作者としては、CSSで挫折した人間にとっては、ここ部分がこのこと言ってるんだなーふむふむと完成品をながめることは、とても勉強になりました。
かといって、ゼロから組み立てることはできませんが…

そして、再度テンプレート探しの旅にでます。

ワードプレス内にあるテンプレートは、主に英語表記なため、みためかっこよくみえても、日本語になった途端、かっこよさが半減します。
画数や漢字、カタカナ、ひらがなと表記が多い日本語の致命的なところ。
それならば、無料の日本語テンプレートを探しました。

私的に素敵なヴィジュアルだなと思うものを一部紹介します。

Godios
革新的な表示速度を実現可能したWordPressテーマ
フォントもスタイリッシュで、全体的な飾り気のないところが、とても好感度あります。
第一候補でしたが、なんと2020年2月で配布が終了するそうです。

Xeory
バズ部が提供する無料のワードプレステーマ。
企業サイトを最初に作るには、十分なテンプレートです。
サイト制作会社の作品をみると、こちらのテンプレートを使っているところもちらほらみかけます。

Cocoon
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマ。
カラーバリエーションが豊富で、直感的使えるインターフェイスです。

この3点に絞ってテンプレートを使用しましたが、どこかで見たレイアウトというのがぬぐいきれず…
最終的に使用したテンプレートは、
WordPress内のテンプレート

Astrid
https://athemes.com/theme/astrid/

日本語のテンプレートではありませんが、ついヴィジュアル重視してしまうグラフィックデザイナーは、選んでしまいました。

テンプレートは決定しました。
ここから鬼のようにカスタマイズしていきます。

※SEO対策は、教科書通りに設定を。

ユーザーに対するアクセシビリティを常に意識する

常にパソコンで見ていますが、今現代はスマホで見ることが主流。
しかしWordPressはパソコンで作業するので、ついスマホでの表示を確認を怠りがちでした。
自作でサイトもしくはチラシ・パンフを作ってる方が一番陥りやすいのは、ユーザーを意識すること。

チラシ作成講座でも常に口をすっぱくしていっておりますが、自分勝手な流れや制作物は、自己満足にしかなりません。

サイトも常に自分勝手では、0.3秒でお客様は離れていきます。

変更したらすぐにスマホでチェック。
文字や行間のズレなどは、CSSでカスタマイズし、PCとスマホで表記を確認を繰り返しました。

形ができてくると、細部が気になり始めました。
その中のひとつ、サイトにおけるトップページに戻るボタンがないこと。

テンプレートに搭載されているのかもしれませんが、なんせ英語表記なのでテンプレート提供のサイトを読んでもちんぷんかんぷん。

プラグインに頼る

トップへ戻るボタンは、プラグインを有効化することであっさり解決。
味をしめたので、これからの問題解決は、プラグインに頼ることに。大抵の問題は、プラグインで解決できました。

はたと気づいたことに、スマホユーザーにはかかせない、下部に存在する固定フッターメニュー。これが存在しない。

プラグインはこちらを。英語が得意な方にぜひ(笑)

Fixed Bottom Menu

プラグインもありましたが、見た目で納得できなかったことと英語表記でまたもやちんぷんかんぷん。CSSで解決を試みました。

ここまで、ほとんどネット検索。
エラーの解消もネットで解決。
いろんな方が、ブログでWordPressを指南してくれているので、指南書がなくとも制作可能なことがわかりました。

難なくサクサクっとカスタマイズもできたので、思った通りのメニューのできあがりです。

若干ところどころ修正をいれたいのですが、全体的には出来上がったのでめでたく公開です。

まとめ

WordPressを使ってこれから自社サイトを制作しようと思っている方には、注意が必要です。

  • 基礎知識が必要
  • パソコンなれしている程度では触らない方が無難です
  • テンプレートのまま使用すると素人くささがぬぐいきれない
  • 英語仕様のテンプレートは、日本語にはそぐわない。

しかし、カスタマイズすることでプロに近づけることもできます。

独学の素人なのでプロの方からしたらなってないソースなのですが、そこはご容赦を…

関連記事一覧