WordPressを使ったWeb制作効率化のためのTips&Tools

Webサイト制作効率化[WordPress] よつばデザイン後藤賢司

今日のメニュー1. 自己紹介2. 情報収集や準備について3. 自作フレームワークのススメ（オリジナルテーマ）4. クライアントワークで使えるプラグインの紹介5. 有料プラグイン＆素材の紹介（国内・海外）6. 制作時に心がけてる事7. CPIサーバーを使う理由

自己紹介よつばデザイン後藤賢司東京と大分の2拠点で活動中。Webサイトの企画・デザイン・制作。Webメディアとか地域活性化とかに興味あり。よつば手帖 http://yotsuba-d.com/blog

http://yorozusound.comhttp://cocomag.net http://jimomag.com

スタイルは人それぞれ？個人的に培った制作スタイルなので、必ずしも全ての人に最適では無いかもしれません。自分だったらこうするよみたいなノウハウがあれば後で教えてください（共有します）。

準備編制作の前に出来る事。

情報収集しよう

RSSリーダー使ってますか？

RSSリーダーを活用しようGoogleリーダーオススメ。スマホでもチェック可能。 http://reederapp.com/

WordPress関連のサイトをたくさん登録してみるたくさん見ると信頼できる情報源がわかってくる。登壇したり、執筆したりしてる人の情報は信憑性が高い。

日本のWordPress関連サイト

Simple Colors フォーラムでも有名な大曲さんのサイト。プラグインやためになる情報がたくさん。 http://www.warna.info/

株式会社コミュニティコム星野さんのサイト。スライドや動画をたくさん見る事が出来る。 http://www.communitycom.jp/

ja.naoko.cc WordPressの運営・開発を行っている Automatic社のマクラケン直子さんのサイト。オフィシャルのいち早い情報などが掲載されてます。 http://ja.naoko.cc/

8bitodyssey.com 日本語翻訳チームのOdyssey さんのサイト。デフォルトテーマの解説や最新情報なども充実。 http://8bitodyssey.com/

Shinichi Nishikawas blog ころぐの西川さんのサイト。マルチサイト系のカスタマイズ記事が多い。 http://nskw-style.com/

Firegoby 宮内さんのサイト。実践で役立つプラグインなどをたくさん公開されてます。 http://firegoby.jp/

Webデザインレシピ記事の内容やボリュームがすごい高橋さんのサイト。とても丁寧に解説されてます。 http://webdesignrecipes.com/

Cat Speak コモモさんのサイト。記事もスライドもおすすめです。 http://cat-speak.net/

高橋文樹.com 小説家でもある高橋文樹のサイト。カスタマイズやプラグインの情報などが多め。読み物としても面白いです。 http://takahashifumiki.com/

dogmap.jp デジタルキューブの岡本さんのサイト。様々な情報が載ってます。 http://dogmap.jp/

Wpxtreme フォーラムでもよく見かける kzさんのサイト。カスタマイズ情報がたくさん読めます。 http://wpxtreme.jp/

まだまだあるので探しましょう。

海外の記事を読もうユーザー数が多い分、貴重な情報も多い。

英語できますか？

英語が出来なくてもなんとかなるGoogleリーダーには翻訳機能が備わってます。万能と言うわけではありませんが、おおよその内容をつかむ事は可能。

翻訳機能をデフォルトで設定フォルダにまとめて設定言語に翻訳。全部自動で訳してくれます。

この記事が

こんな風に読めます

日本に来て日の浅い外国人がしゃべってると思えばOKオレナントナクワカッタ。思いやり補完しましょう。

海外のWordPress情報

WpRecipes.com WordPressのカスタマイズ情報が載ってます。 http://www.wprecipes.com/

Wptuts+ WordPressの情報が沢山載ってます。 http://wp.tutsplus.com/

WordPress Snippets, Code, Hacks,590+ for your theme, blog WordPressの情報が沢山載ってます。 http://wpsnipp.com/

Wordpress Themes, Plugins,Tutorials&More - WPMU.org WordPressの情報が沢山載ってます。 http://wpmu.org/

情報によって保存先を変える役に立ちそうな情報はPocket （Read it rator）へ。 http://getpocket.com/ すぐに使えるソースコードなんかはEvernoteへ。

さらに情報収集もう一歩踏み込んで情報収集してみる。

はてなブックマークのタグで情報収集するはてなブックマークのタグをRSS登録する。http://b.hatena.ne.jp/search/tag?sort=recent&q=WordPress▼3つ以上ブックマークされてるものhttp://b.hatena.ne.jp/search/tag?q=WordPress&users=3

Googleアラートを使う情報の精度は高くないけど、たまに発見がある。http://www.google.co.jp/alerts

この方法はいろいろな情報収集に使えます。読むのは結構大変ですが、未読がたまったら「既読にする」ボタンを押せばOK。※有効な情報にはまた会えます。

情報をまとめよう

Evernoteを活用しよう使えそうなコードや、カスタマイズ例などをストックしておくと役立ちます。後から検索しやすい。無理に整理しなくてもOK。たまに見直しましょう。 http://evernote.com

Evernoteはこのように使ってます

良く使う機能はスニペットに良く使いそうなコードは登録してると便利。CSSの角丸とか透明度とか。テキストエディターでも使えるように辞書登録してたりします。

素材をまとめようよく使うパーツや写真はローカルにまとめておくと便利。いちいち本を開かなくて良いので早い。

素材のまとめ方素材によってはファイルがバラバラで一気に閲覧できないのが不便。1つのイラレ書類にまとめておくと閲覧しやすい。（埋め込み機能を使う）。

バラバラで使いづらい…1枚のイラレファイルにまとめる。

素材（aiファイル）のまとめ方http://www.youtube.com/watch?v=IW2QQ1Zwkv8

WordPress編

時間の読めない作業を極力減らす何かある毎に調べてるようでは時間が読めないのですごく危険。「いつになるかわかりません」は問題あり。

自分用のフレームワークを作ろう自分用にベースとなるテーマを用意する。 CSSもカスタマイズしやすい。

自分用フレームワークだと様々な状況に対応しやすいざっくり言うとTwitter Bootstrapみたいなものを自分用に作る。いろんなサイトを作ってる人にはすごく便利。中身を把握してる分、表示エラーなどが起きた時に対処しやすい。

一般的なコーポレートサイトはサイト構造が良く似ている

テンプレートカスタムメニューやウィジェットエリアを用意。

トップページのバリエーションを用意する（home.php）カテゴリ別にサムネイルとタイトル出したり、スライドショーを導入したり。

レイアウトによってCSSは変わる

アレンジしやすいCSSの構造に汎用性をもたせた構造にしておき、アレンジしやすいように作る。

メインビジュアルもウィジェット化。スライダープラグインを導入。メインビジュアルはスライダープラグイン使ったり。担当者レベルでも差し替えが可能。

基本的なCSSのクラスを用意.round10{ border-radius:10px; 角丸などのよく使うクラスを -webkit-border-radius:10px; あらかじめ準備。 -moz-border-radius:10px;}.round5{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}.round3{ border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}

構造をわかりやすくするよく使う角丸やボタンなどは CSSで用意。 2カラムレイアウトや3カラムレイアウトなどのクラスも用意

共通化しやすいパーツを用意する

いろんなテーマの中身を見ると勉強になるどんな構成や考え方で作られてるのか、テーマを見る事が出来るようになれば自分なりのやり方が見えてくる。たまに時間作って見てみましょう。

カスタマイズ項目はfunctions.phpにまとめる参考プライムストラテジーさんhttp://www.prime-strategy.co.jp/download/石川さんのコーポレート向けテーマBizVector（ビズベクトル）http://bizvektor.com/Codexで探す。http://wpdocs.sourceforge.jp/

日本語で記載されてるのはわかりやすい

functions.php実例//投稿画面の内容を表示・非表示function remove_post_metaboxes() { remove_meta_box(postcustom, post, normal); // カスタムフィールド remove_meta_box(commentstatusdiv, post, normal); // コメント設定 remove_meta_box(trackbacksdiv, post, normal); // トラックバック設定 remove_meta_box(revisionsdiv, post, normal); // リビジョン表示 //remove_meta_box(tagsdiv-post_tag, post, normal); // タグ}add_action(admin_menu, remove_post_metaboxes); 使わないものはコメントアウト//ウィジェットでショートコードを有効化add_filter(widget_text, do_shortcode);

ウィジェットを複数用意する。▼ Functions.phpに記述（コピペして名前を変えれば増やせます）register_sidebar(array( name => トップページメイン, before_widget => <div id="%1$s" class="topmainw">, after_widget => </div>, before_title => <div class="title">, after_title => </div>));▼テンプレートに記述<?php dynamic_sidebar(トップページメイン); ?>

サムネイルとカスタムメニューを使えるようになると結構広がるサムネイル使用すると表現の幅が広がる。カスタムメニューなら急な変更にも対応しやすい。

サムネイルを有効化する▼ functions.phpに記述//サムネイル使用add_theme_support(post-thumbnails);set_post_thumbnail_size(200, 200, true);add_image_size( category-thumb, 220, 150, true ); ?>▼テンプレートに記述<?php the_post_thumbnail(); ?>

カスタムメニューを有効化する▼functions.phpに記述//カスタムメニュー有効化register_nav_menus( array( mainmenu => メニューバーに入ります, footermenu => フッターに入ります,));▼テンプレートに記述<?php wp_nav_menu( array(theme_location => footermenu )); ?>

ページバリエーションの多いものは条件分岐<?php if(is_page(‘about’)): ?>このページはaboutです。<?php elseif(is_page(‘company)): ?>このページはcompanyです。<?php elseif(is_page(‘○○○ )): ?>このページは○○○です。<?php endif; ?>

条件分岐がややこしい時はページ分テンプレート作れば良いページテンプレートをサブフォルダにまとめるのが可能。

ヘッダー周りはCSSで対応してもOKヘッダー画像はCSSだけでも対応可能。ボディクラスに対して設定できる。テンプレート（header.php）<body <?php body_class(); ?>>実際のコード<body class="page page-id-2 page-template-defaultlogged-in admin-bar single-author singular two-column right-sidebar">

テンプレートは、適度に見直して改良していくいろんなテーマを見たりして、その都度改良する。

サイトデザインマジメにやる。パターン化しない。

プラグイン

プラグインを知ろういろいろ知っている方が何かと便利。Plip | WordPressプラグインのクリップサイトhttp://www.plugin-clip.com/

プラグインを整理しよう膨大な数のプラグインを把握するのは結構大変。サイト毎によって使うプラグインは異なるので用途別に整理しておくと後で楽です。

プラグインの効果で名前をつけて管理してます

コーポレートサイトなどで使えそうなプラグイン

自動でサムネイルを設定してくれるAuto Post thumbnail サムネイルを設定し忘れても自動で設定してくれるプラグイン。 http://wordpress.org/extend/plu gins/auto-post-thumbnail/

ウィジェットエリアにバナーを貼りたい時はImage Widget ウィジェットに画像を表示、リンクも出来るのでバナーをちょっと追加したい場合などに便利 http://wordpress.org/exten d/plugins/image-widget/

高度なバナー管理プラグインAdRotate Adsenseやバナーなどの公開期限を設定出来たり、クリック数をカウント出来るプラグイン。ショートコードや独自タグでいろんな場所に埋め込む事が可能。 http://wordpress.org/exten d/plugins/adrotate/

ウィジェット感覚でコンテンツを追加管理できるBuckets ショートコードでコンテンツ挿入が可能。ビジュアルエディタで編集できるので専門知識が無くても可能。 http://wordpress.org/exten d/plugins/buckets/本文下にショートコードが表示される

複数画像のアップロード時に便利なFile Gallery 複数の画像アップロードして個別に貼り付けたりしたい時などに便利なプラグイン http://wordpress.org/extend /plugins/file-gallery/

Duplicate Post 記事を複製できる。 PCに強くない人に優しい※。カテゴリーやタグのチェック忘れ等を防げる。 http://wordpress.org/exten d/plugins/duplicate-post/

シンプル予約システム（予約管理）イベントなどの予約が出来るようになるプラグイン。有料版もあり http://app.mt-systems.jp/mtssb/

コンテンツスライダーWP Content Slideshow コンテンツスライダープラグイン。テーマを編集する必要があり。 http://wordpress.org/extend/plu gins/wp-content-slideshow/

ウィジェット表示に条件をつけられるWidget Logic ウィジェットの下に条件の窓が追加される。例：「is_page(‘about’)」と入力するとスラッグがaboutのページのみ表示される。 http://wordpress.org/extend/ plugins/widget-logic/ ▼解説 http://kachibito.net/wordpres ここに条件を追加 s/widget-logic.html

スライドショーが作れるMeteor Slides カスタム投稿タイプ形式でシンプルなスライドショーが作成できる。1種類のみ。 http://wordpress.org/exten d/plugins/meteor-slides/

もう一歩進めるためにお金をかけてみる多少の出費は必要だけど便利な機能を取り入れて作業時間や手間を減らす。

有料プラグインを使ったことありますか？

有料プラグインを導入高機能なものが多く、費用対効果が高い。

日本と海外のプラグインの違い（イメージ）日本製のプラグインは海外のものに比べて高額だがクライアントワークには有効。海外製のプラグインはとにかく沢山あり、リーズナブルで導入しやすい。

有料プラグイン（日本）

ネットショッププラグインとフロントエンドユーザー管理プラグインショッピングカート機能と会員を管理するプラグイン。クーポンが発行できたりアフィリエイトなども可能。ダウンロード販売にも対応。 ※アップデートが有料 http://www.cmswp.jp/plug ins/net_shop_admin/

FE Advanced Search（複合検索プラグイン）複数の条件で絞り込み検索が出来るプラグイン。気軽に導入できる。 http://www.firstelement.jp /fe-advanced-search/

カート＆検索プラグイン使用例 http://yorozusound.com/

有料プラグイン（海外）

Codecanyon（プラグイン販売サイト）数ドル～数十ドルで様々なプラグインを購入可能。高機能なスライダーや編集補助プラグインなどがある http://codecanyon.net/

複雑なレイアウトが可能になるEther Builder 編集補助系プラグイン。カラムレイアウトや、地図やギャラリーなどを簡単に導入できる。 http://codecanyon.net/item/eth er-content-builder-wordpress- plugin/1690784

Ether Builder demo http://www.youtube.com/watch?v=TSZXdHNJOdY

スライダープラグイン Slider Proスライダープラグイン、専用管理画面で細かいカスタマイズも可能。http://codecanyon.net/item/slider-pro-wordpress-premium-slider-plugin/253501

他にもたくさんあります。

WPMU（会員制プラグイン販売サイト）マルチサイト向けや BuddyPress用のプラグインが充実。会員費用を払って使用する形。 http://premium.wpmudev.org

Pro Site(マルチサイトプラグイン) マルチサイトにレベルを付加できる。プレミアムテーマやプレミアムプラグイン機能があるのでホスティングサービスのような事が可能。 http://premium.wpmud ev.org/project/pro- sites/

WPMUには他にもプラグインが沢山。※テーマもあります。有料会員サービスを作れるMembership。http://premium.wpmudev.org/project/membership/マルチサイトでショッピングカートが利用できるMarketPress。http://premium.wpmudev.org/project/e-commerce/

有料フォームプラグインGravity Forms 高機能なフォームプラグイン。通常のフォーム機能に加え、簡単な見積もりや、記事の投稿が可能。 http://www.gravityforms.com/

有料素材を導入する

Graphic river アイコンやモックアップ用のデータを購入できる。 http://graphicriver.net

モックアップツール

他にもたくさんあります

海外のアイコンは高品質アイコン販売サイトはすごくたくさんある。眺めてるだけでも勉強になります。

有料テーマ海外では高品質なテーマが沢山売られています。中身見るとすごく勉強になります。 http://themeforest.net/

制作について心がけてる事

日頃から新しい技術に対して情報収集および実験を人から技術やノウハウを教わるも良いけど、自分で実践しながらの習得はすごく大事。この積み重ねをしている人はピンチに強い。

日頃からいろんな事例を見ておくPinterestは表示が速い。 http://pinterest.com/

発想のソースとなるサイトをいくつか持っておく http://dribbble.com/

基礎的な技術も勉強するドットインストールでこまめに勉強。 http://dotinstall.com/

作業の前にしっかり設計する作業が遅い人は、事前にしっかり設計を考えてない人が多い。作りながら考えるはNG。クオリティを高めるための後からの改良（試行錯誤）はあり。

まずは全体のまとまり感を大切にする。まずは全体のまとまりに重点を置いて作る。時間が許せば装飾や細部に力を入れる。家を建てる時に骨組みが出来る前からドアノブの彫刻を必死にやるような事はしない。

一回寝かす様々なプロジェクトを平行してやってると、ギリギリの作業になりがち。余裕をもって締め切り前にあげて、一旦寝かして見直すのが理想。

迷ったら一旦リセットあれこれやるより一からやり直したほうが早い。それまでの考え方が正しいのであれば基本ぶれない。

自分の作業時間を知る数十分刻みで作業計画が立てられるようになると、時間配分がかなりスムーズになる。迷ったら一旦置いて他の作業をする。

やる気が出てくる考え方尊敬する人などが、今の自分と全く同じ環境や状況に置かれた場合、自分は同等に頑張れているかと考えてみる。

情熱大陸に出演してる自分を想像する。

人の話を鵜呑みにしないおかれてる環境や作業内容によって、大事にするべき部分は変わります。有名なサイトだろうが影響力のある人の言葉だろうが鵜呑みにしてはいけません。自分にとって必要な事かそうでもない事か、しっかりと判断できるように心がけましょう。

CPIのサーバーを使う訳CPIの共用サーバーAce01はオススメ

大手のサービスなのでお客さんに勧めやすい。ネットに疎いお客さんに勧めやすい。サポートも充実。以前問い合わせた時も返事が早かった。

再販ＯＫ意外と知られてないけど再販が可能。複数のサイトを運営している制作会社さんなんかには特にオススメ。

複数のサイトを格納すればかなりお得一見割高に見えるけど、数サイトあれば軽くペイできる。

ドメイン毎にサーバー＆メール用コンパネを発行してもらえるドメイン毎に独立しているので売りやすい。

ドメイン毎に独自IPをふってもらえるのでSEO的にも有利共用サーバーにありがちな同一IP上の他人のサイトなどの影響を受けない。サブドメインには別IP。

スマートリリーステストサーバーから本番サーバーへボタン一つでデータを移動できる。バックアップもとってくれるので、問題あればすぐに戻せる。サーバー技術に詳しくない人にやさしい。今後さらに機能追加もあるらしい。

CPIサーバーの注意点申し込んでから使えるまでに多少時間がかかる。他のサーバーのように申し込んですぐ使えない。マニュアルが若干わかりにくい。

WordPressのプラグインも自動でインストールしてくれるCPIの自動インストールで入るプラグインAll in One SEO Pack Ktai StyleBreadcrumb NavXT Lightbox 2Contact Form 7 WP Super CacheGoogle XML Sitemaps WptouchBuddyPressWPML Multilingual CMS（有料プラグイン）

メリットのほうが大きいサーバーどうしようかなって人にはすごくオススメです。

ありがとうございました。

http://w3q.jp	5688
http://sanko-site.com	1817
http://yotsuba-d.com	1046
http://asklife.info	290
http://ahk-s.blogspot.jp	122
http://itslidestudy.com	80
https://twimg0-a.akamaihd.net	70
http://netaone.com	54
http://m-corporation.jp	28
https://twitter.com	12
http://function3studio.com	9
http://s.deeeki.com	9
http://pinterest.com	8
https://si0.twimg.com	7
http://ahk-s.blogspot.com	7
http://localhost	4
http://hatebutv.com	3
http://seisaku.ailine.net	2
http://ahk-s.blogspot.in	2
http://www.m.techgig.com	2
http://ahk-s.blogspot.co.uk	1
http://www.google.com	1
http://ahk-s.blogspot.fi	1
http://purecrest.blogspot.jp	1
http://ahk-s.blogspot.de	1
http://ahk-s.blogspot.com.es	1
http://ahk-s.blogspot.ro	1
http://ahk-s.blogspot.pt	1
http://webcache.googleusercontent.com	1
http://www.newsblur.com	1

WordPressを使ったWeb制作効率化のためのTips&Tools

by kenji goto on Aug 01, 2012

Accessibility

Categories

Upload Details

Usage Rights

30 Embeds 9,270

Statistics

WordPressを使ったWeb制作効率化のためのTips&Tools Presentation Transcript