WEBデザイナーがこっそり公開！ワードプレスをビジネス用WEBサイトにカスタマイズする10のツボ

store

仕事がWEBデザイナーなので、WordPressのカスタマイズをする機会が多いのですが、今回の制作のポイントをメモ。同業者の方やこれからWEBデザインをする人達にも役に立てるかも知れません。私も人のWEB上の情報から学んで来たのでこういうことはギブアンドテイクで当然との気持ちで。

ブログのカスタマイズをポイントだけかいつまんで解説すると、簡単そうだと思うものですが、そのポイントがわかるまで試行錯誤があります。シンプルなWEBデザインになればなるほど、アラも見えやすく、なかなかそういうアラを潰すのに時間がかかります。制作したブログを宣伝する目的では無いのでご了承下さい。お役に立てれば幸いです。

カスタマイズのツボ：1 使う人を見極める

https://matome.naver.jp/odai/2139683482819919301/2139684074127028703

ワードプレスを「使う人は素人」

ブログをデザインするのでは無く、WordPressをCMS(Content Management System)として使うのが目標であり、そこが業務で請け負うのと個人的にブログを作るのとでは異なってくる。「自分はWEBのプロでも使用者は素人」これを忘れてはならない。

左のWEBは今も現役で使用されているドメスティック・ブランドのセレクトショップのWEBサイト。通販とブログを一体化した設計。

https://matome.naver.jp/odai/2139683482819919301/2139684074127028803

使用したテーマファイルについて

今回のWEBはサンキャッチャー作家さんのオフィシャルWEBサイト。CMSとしてWordPressを使用する。使用したテーマはnikeoという海外のデザイナーのCustomizrというテーマ。

自分で使うブログならなんでもいいのだがクライアントが使う場合、メンテナンス性に優れたものを探さなければならない。

https://matome.naver.jp/odai/2139683482819919301/2139684315229293403

ほぼ最高レベルのWPテーマ

決定するまで10数個テーマをテストしたが、Customizrは現在、ほぼ最高レベルの無料テーマだが、デザインが冗長で削ぎ落とす必要あり。しかし、基準は見た目よりもメンテナンス性。

Customizr – Demo
http://demo.themesandco.com/?fp_unlimited=true
Customizr
http://www.themesandco.com/

「ワードプレスのクールなテーマファイル」とかのリストがありますが、ああいうので作って上手く行った試しはありません。見た目のカッコ良さに騙されて、作業を開始して後悔することが昔はよくありました。wordpress.orgで推奨されているテーマは見た目だけで推奨されているわけではありません。テーマの見極めも経験ですが、目的に応じたテーマを見抜ける様になりましょう。

Free WordPress Themes
http://wordpress.org/themes/

カスタマイズのツボ：2 作業時間の配分

https://matome.naver.jp/odai/2139683482819919301/2139684074127028903

重視すべき部分はなにか？

アーティストの生命線は作品。ギャラリーが命と言って良い。日々のブログで苦労話を書かせるようなやり方も悪くは無いが、アーティストはクールでありたいもの。

このデザインはテーマファイルのデフォルトで作っている。元は四角いタイルが並ぶCSSだが、丸くなる様に細工しただけの手抜き仕様だが、元のデザインがしっかりしているのでギャラリー用プラグインを入れなくてもOK。下記に円形にするCSSを記述。重要な部分だとしても、作業の時間配分を考え、適切な時間で仕上げることを意識するのがプロとしての仕事。

/* 円形画像 */
.gallery-item img {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-transition: -moz-transform 3s ease;
-webkit-transition: -webkit-transform 3s ease;
-o-transition: -o-transform 3s ease;
transition: transform 3s ease;
border-radius: 300px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
}

カスタマイズのツボ：3 企業系サイトでもありがちな要求

https://matome.naver.jp/odai/2139683482819919301/2139684171527967803

ポスト記事でブログとページを作る

ブログ記事(ポスト記事)と一般的な記事の違いは日付だろう。しかし、固定ページだと連続で読ませるサイドバーを作らせる仕様にするのとNext、Prevのページ送りが面倒。その為、カテゴリIDが5番の場合はCSSを日付の周りで書き換えることで、日付と著者名の非表示を可能にした。ID5番はブログ記事投稿だが、ページ的に表示したいカテゴリだった為。customizrテーマをカスタマイズするときのご参考になれば。

/public_html/wp-content/themes/customizr/parts/class-content-post_metas.php

/*class-content-post_metas.php 50行名あたりを改造。 */

/* 以下CSSを追記 !importantは不要かも知れないけど。 */
.entry-metax .entry-date,.entry-metax .by-author{
display:none!important;
}

https://matome.naver.jp/odai/2139683482819919301/2139685117934557703

前と次の記事へのリンク

ポスト記事なのにページ風に扱おうとしたら、やったら問題がひとつ発生。記事のタイトルで前後をナビゲーションする場合に、カテゴリ以外の記事も出てきてしまう。それを解決するにはprevious_post_linkとnext_post_linkの制御を調べればOK。

in_same_catパラメータでTRUE の場合、同じカテゴリーの記事だけが表示される。簡単。

/public_html/wp-content/themes/customizr/parts/class-content-post_navigation.php

/*class-content-post_navigation.php 68行名あたりにTRUEを追記 */
$singular_nav_previous_text = apply_filters( ‘tc_singular_nav_previous_text’, _x( ‘<:’ , ‘Previous post link’ , ‘customizr’ ) );
previous_post_link( ‘%link’ , ‘‘ . $singular_nav_previous_text . ‘ %title’,TRUE );
?>

/*同様に78行名あたり TRUEを追記*/
next_post_link( ‘%link’ , ‘%title ‘ . $singular_nav_next_text . ‘‘,TRUE );
?>

カスタマイズのツボ：4 無意味だと思う部分にこそ差が出る

https://matome.naver.jp/odai/2139683482819919301/2139684074127029103

フッターの修正

通常、コピーライトが書かれているフッターを画像化している。クリックでトップページに戻るリンクの役目も。こういう部分は普通、アマチュアのWEBサイトでは文字を治す程度で済ませるものだが、こうするだけでWEBとしてのグレードが上がった感じに見えるだろう。何の意味があるのかなんて考えてたらWEBデザインなんかする意味自体が無くなってしまう。スキを見せない。またWEBデザインは下が軽すぎると締まらないというかなにかだらしなさを感じてしまうもの。

カスタマイズのツボ：5 ソーシャルメディアの役割を意識する

https://matome.naver.jp/odai/2139683482819919301/2139684074127029203

ソーシャルメディア・アイコン

デフォルトのJetPackを使用しているがアイコンがいまいちムードに合わなかったのでアイコン画像を入れ替え。CSSで位置も移動。アイコンを付ける理由は「記事を引用しても良いですよ」というパーミッションを閲覧者に与えるくらいしか、意味は無いと思うが今回は海外も意識しているのでソーシャルメディアは無視出来ない。

Somacro: 40 300DPI Social Media Icons
http://vervex.deviantart.com/art/Somacro-40-300DPI-Social-Media-Icons-267955425

カスタマイズのツボ：6 コンテンツの最適化

https://matome.naver.jp/odai/2139683482819919301/2139684074127029303

そして、プロフィール

アーティストさんは元自動車メーカーのイメージガールにもなったことがある方だけに、容姿が良いのは当然だが、プロフィール写真と製品画像はこのWEB用にプロのカメラマンが撮影。

プロはプロの絵を作るもの。手軽に自分で済まそうなんて考えるのは損。安いフィーでもそこそこ腕のあるカメラマンを探そう。

https://matome.naver.jp/odai/2139683482819919301/2139684074227029603

英語プロフィール

海外からの仕事を中心としてきた方なので英語プロフィールも1ページ作成。右のメニューからリンクしたFacebook、twitterもカスタマイズして、英語プロフィールだけをソーシャルメディアにリンクさせている。ここもプロデュースの範囲。

今でもソーシャルメディアだけでビジネスをするのはマズ無理。自分のWEBサイトなくして、ビジネスはありえない。

カスタマイズのツボ：7 セオリー通りじゃつまらない

https://matome.naver.jp/odai/2139683482819919301/2139684074227029503

あえてスプラッシュページ

今時、スプラッシュページをWP Splash Pageで設定。再表示日数を設定出来たりする便利なプラグイン。Cookie、Refererで制御するPHPを昔はヘッダに書いたけど、メンドクサイからね。Googleもスプラッシュページを今は検索結果にしない様だ。また、最近はSEOより、閲覧者の心理的な影響を計算して制作することが多くなった。普通のスプラッシュページだったので後に修正。

カスタマイズのツボ：8 無駄の無いプラグインの使用

https://matome.naver.jp/odai/2139683482819919301/2139684074227029403

プラグイン一覧

Display Widgets、WP Category Post List Widgetこの2つでサイドバーの表示制御を行っている。この2つのプラグインの組み合わせは強力。これは今回の作業の収穫。PHPを修正するより、手軽で安全に作業が早く進む。WP-OptimizeとSearch Regexはメンテナンス上必須。表示速度が遅くなったらオプティマイズしよう。Search Regexはデータベース上の文字列をリプレース出来る。誤字をまとめて修正可能。My Category Order、Simple Local Avatarsは今のところ使っていない。Google XML Sitemapsを追加。

また、このテーマファイルはメタタグを正常に吐かないのでall in one seo packで対応。これは改善して欲しいポイントだった。1つのWordPressでCMSとしての全体のページ管理の機能とサイト内のブログ運営を可能にする設計の為、サイドバーの出力をかなり考えなければならなかった。プラグインを使って殆ど制御しているがどうしようもないところはCSSで表示制御。それでもダメならPHPを記述という感じで出来る限り、PHPを触らない仕上げに拘った。

カスタマイズのツボ：9 当然、レスポンシブデザインで

今時iPadやスマホ用の簡素なテンプレートに切り替えるというのは古臭いやり方。WEBのデザインをそのままレスポンシブで表現したい。WordPressのテーマファイルは殆どレスポンシブになっているのでカスタマイズは然程難しく無い。ただしフォント指定のサイズが極端な場合が多いので注意が必要。スマホサイズもレスポンシブにする場合、JetPackのスマホ用のテーマは使わない設定に。

カスタマイズのツボ：10 日本語に最適化するフォントの修正

海外のデザイナーが作ったテーマはカッコいいけど、それでブログを運営している日本人をあまり見かけない。なぜかと言えばデザインのテーマを日本語に置き換えると違和感が大きいからだろう。また大げさ過ぎるデザインも多い。日本語に最適化するフォントの修正は勘所は慣れるまでなかなか大変だと思うが、経験を積めばわかってくる。基本的なグラフィックデザインの知識は必要。

以下ソーシャルメディア関連

https://matome.naver.jp/odai/2139683482819919301/2139684074227029903

tumblrはWordPressを駆逐する？

今回一番驚かされたのは久々にアクセスした’tumblr'(タンブラー)だった。プロフィール横のリンクのtumblrでギャラリーを作ってみたのだが、このクオリティのものがあっという間に作れた。文字の大きさのCSSを直した作業はしたがそれを含めて15分とかからない。WordPressでギャラリーを作るより手軽すぎる。

Fixed. theme by Andrew McCarthy
http://fixed.andrevv.com/

WPよりtumblrを使う海外の人が増えているのは確かで、Facebook、twitterと連携することを前提にtumblrは存在していると言える。新しいソーシャルメディアと呼ぶ人もいるが、これはそうでは無い。tumblrはFacebook、twitterの弱点である「プレゼンテーションの貧弱さ」をカバーする為のソーシャルメディア。プロのデザイナーじゃ無くてもプロのデザイナーの作ったテーマをそのまま簡単に流用出来る。ソーシャルメディアの「三種の神器」は決定した様だ。近い将来、WordPressはtumblrに駆逐されるかも知れない。