SlideShare ist ein Scribd-Unternehmen logo
1 von 24
“ デザイナー的”
CMS 選びの勘どころ
牧野 謙
まきの けん

ピースデザインラボ 代表/ W bデザイナー
e
スキルについて
デザイン

マークアップ

Flash

PHP

Javascript
こ き ゃ く こ う ふ ん ど

顧客興奮度
顧客興奮度
原因は?
なぜ興奮度は暴落するのか?

1. 不可解な用語
2. ナビゲーション
3. WYSIWYG
要するに、
管理画面

UI
ローカルの
エンドユーザーの
ネット習熟度は
多様すぎる
基本、
用語・操作方法は
新たに
憶えたくない
使いにくさが
サイトの価値判断を
下げる
まとめ
ご来場の皆様へ
メーカー、
プラグイン開発者の
皆さまへ
・ログイン後の初期画面の選択
・用語の一括変更
・メニュー、一覧項目の表示/非表示
・管理画面制御用 CSS の別途設置
まちのデザイナーの
皆さまへ
MTDDC2014 Nagoya_Makino

Weitere ähnliche Inhalte

Andere mochten auch

MTとAzureの素敵な関係 '14名古屋
MTとAzureの素敵な関係 '14名古屋MTとAzureの素敵な関係 '14名古屋
MTとAzureの素敵な関係 '14名古屋Masaki Takeda
 
MTDDC Meetup NAGOYA 2014 Keynote
MTDDC Meetup NAGOYA 2014 KeynoteMTDDC Meetup NAGOYA 2014 Keynote
MTDDC Meetup NAGOYA 2014 KeynoteDaiji Hirata
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方Yasuhisa Hasegawa
 
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014taiju higashi
 
Movable Type 6.0をできるだけ安く使う方法
Movable Type 6.0をできるだけ安く使う方法Movable Type 6.0をできるだけ安く使う方法
Movable Type 6.0をできるだけ安く使う方法Hajime Fujimoto
 
MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料Yasufumi Nishiyama
 
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!loftwork
 
サービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツサービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツYumi Masaki
 

Andere mochten auch (8)

MTとAzureの素敵な関係 '14名古屋
MTとAzureの素敵な関係 '14名古屋MTとAzureの素敵な関係 '14名古屋
MTとAzureの素敵な関係 '14名古屋
 
MTDDC Meetup NAGOYA 2014 Keynote
MTDDC Meetup NAGOYA 2014 KeynoteMTDDC Meetup NAGOYA 2014 Keynote
MTDDC Meetup NAGOYA 2014 Keynote
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
 
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
 
Movable Type 6.0をできるだけ安く使う方法
Movable Type 6.0をできるだけ安く使う方法Movable Type 6.0をできるだけ安く使う方法
Movable Type 6.0をできるだけ安く使う方法
 
MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料
 
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
 
サービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツサービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツ
 

Hinweis der Redaktion

  1. みなさんはじめまして。自己紹介は後ほど、させていただきますが、 ここからは、私のセッションとなります。お聞き苦しい点等あるかとは思いますが、 どうぞよろしくお付き合いください。 えー、事前の告知情報では 「“デザイナー的”CMS選びの勘どころ」というタイトルが公開されていましたが、 昨日、家でうちの奥さん相手に予行練習したところ、 『まず何よりタイトルがスカしてて不快』と 内容の駄目出しをしてもらえないばかりか 出ばなから、とんでもない言われようでしたので、考えあぐねた結果 タイトル、急遽変更します。 題して、
  2. 愛知県東部発 切実 地元デザイナーの決められないCMS こんな内容でお届けいたします。 えー、今回、あえて私のような街の制作者に このような場でのお話の機会を与えていただきました。 直接、エンドのお客さまにCMSを提供している者として、率直に、普段感じている事をお話しできればと思います。 メーカーやプログラマの皆さんには末端の利用者の声として、 また、ご同業の皆さんには居酒屋のあるあるトークとして、 楽しんでお聞きいただければ幸いです。 それでは30分間よろしくお願いいたします。
  3. それでは、まずは自己紹介をさせていただきます。 愛知県岡崎市にて、ピースデザインラボというWeb制作事務所で、代表兼Webデザイナーをしております、牧野謙と申します。 1977年生まれ、36歳。家族は前述の妻1人、よぼよぼのおばあちゃん猫が1匹おります。 東京/愛知での制作会社、広告代理店勤務を経て、2012年、郷里の岡崎市にて独立開業いたしました。 現在はアルバイト含めスタッフは3名。 4月には事務所をオシャレなマンション(希望)に移転して、ますます頑張りたいと意気込んでいる最中でございます!
  4. 現在の収益の構成は、 まず、ほぼ半分が、システム開発会社・代理店等、IT関連企業様からの委託業務です。 大手出版社のアプリ開発のUIデザインであったり、某有名競馬組織のスマホサイトのWeb制作案件など 思ってもみない大きなお仕事に巡りあうこともしばしばです。 残り半分は、ローカルビジネスをなさっている地元中小企業様からの直接のご依頼、 実際に打ち合わせから取材、デザイン、マークアップ、CMSの構築、納品まで、一貫して行なっています。 土地柄か、小売りや土木建築、変わったところでは禅宗のお寺さんなどの 業種・業態からご依頼を承っています。 どちらにもそれぞれのうまみ、面白さがあり、 今後もだいたい半々くらいで、業務が拡大できればと思っております。 あとは、サーバメンテナンスや更新サポートによる保守・管理料、 それと時々入る、チラシや名刺印刷等DTPによる売上が数パーセント、 という構成になっています。
  5. あわせて、私のスキルについてもお話をしたいと思います。 一口に「Webデザイナー」と言いましても、国家資格が要るわけでもないですし、『コレができたらデザイナー』という明確な線引きがある訳でもありません。 今回、私のいう「地元デザイナー」も、どういった種類の制作者をさすのかも、分かりにくいかと思います。 そこで、デザイナーの一例として、私のスキルを参考にしていただこうかと思います。 ということでレーダーチャートを作ってみました! ご覧ください!
  6. まず一番得意なのが、いわゆる『デザイン』の分野です。 (スライド) これは色やフォント使い、あるいは余白などレイアウトに関するスキルです。 もちろん一応絵なんかも描けるのですが、イラストはあくまで設計の一部分に過ぎませんので、 ここは、あくまで設計全体に関しての項目だとお考えください。 ちなみに最近関心があるのはフォント、というか文字。 昔逃げ出した書道を、今度こそちゃんとやろうかとか考えています。 続いてマークアップ。 ここは (スライド) 「4」ですね。 具体的にはHTMLとCSSの技能についてです。 HTML5準拠のセマンティックWebやレスポンシブWebは、しっかりフォローしております。 後工程のプログラマーさんに「綺麗なソースですね」と言われたいがために 最後の整形を必死でしています。 ただAPIの活用などはまだまだやっていませんので、 少しびびって「4」にしました。勉強、これからも頑張ります。 さて次はJavascript。 ここは (スライド) 「3」です。 実は、基礎からJavascriptを学んだ事はありませんで、プログラマーの皆さんには全然及ぶべくもないです。 jQueryやアンギュラー等フレームワークを利用して、Web制作に関しては不足無く活用しています。 実際、ページ演出上のエフェクトや動的なコンテンツの書き換えはプラグイン等を利用せず、こちらで全てスクリプティング・運用しています。 ですので、少し見栄を張って「3」とさせていただきました。 さて続いてはPHP。 (スライド) これは「1」です。 苦手です。「PHPできます」口が裂けても言えません。 ただWordPressの構築に必要なレベル、 たとえば投稿のフィルタリングとか、条件分岐などの記述はできますので、その分で「1」としました。 あとは、最近あまり聞かなくなったFlash、 (スライド) こちらが「4」です。 実は、もともとFlashが好きでこの業界に入りましたので、Flash暦自体は10年以上になります。 ただ皆さんご存知のように、最近は案件もほとんどないです。 私のほうでも、昨年、ニコニコ動画の冒頭に流れるCMのムービークリップを作成したのが最後のFlashのお仕事です。 すでに腕が鈍っていてもう「3」とか「2」とかになっているかも知れないです。 (クリック) 以上が私のスキルになります。 その他、ネットワークやDB、アプリについてはサッパリでございます。 必要な場合には、その都度、プログラマーやエンジニアの皆さんに助けていただき、案件に臨んでおります。 さて、以上当ラボの収益構成と私のスキルについてご紹介しましたが、 本日お越しの制作者のみなさんと比べて、いかがでしょう? 『大体わたしと同じくらいだわ』とか『俺の方ができるな』とか、それぞれに違いがおありかと思います。 まずはご自身の背景と照らし合わせて、ぜひぜひ比較しながらこれからの内容、聞いていただければと思います。 さて、お待たせしました、いよいよ本題に移ろうと思います。
  7. 愛知県東部発 切実 地元デザイナーの決められないCMS この雑なタイトルにもありますように、私、切実にCMSが決められないでおります。 実際、いくつかのCMSを都度選択して利用しているのですが、 本当は1つに絞りたい、 いくつもやるとなると、学習コストはかかるし頭の中もパンクする、 スタッフ間でノウハウを共有するのも大変。 でも今のところ、案件によってさまざまなCMSを使い分けなければならないのが実情です。 ここをご理解いただくのに、今日はひとつ、私なりの指標を考えてきました。 それが
  8. 「顧客コウフン度」。 文字通りお客様が興奮した度合いを示した指標です。 制作過程全体で、お客様が興奮した度合いを0から100までの割合で示したものです。 さっそく、当ラボにご依頼いただくお客様の、 平均的な顧客コウフン度を見てみましょう。
  9. たて軸がお客様の「興奮度」、 ヨコ軸が「制作課程」、要するに制作の各プロセスを示しています。 一番左は「受注」、ここから制作がスタートしますよね。 次が打ち合わせ、 当ラボではこの後に、カメラマンやライター、場合によってはアシスタントを引き連れて 取材等を行なうことがあります。 続いてデザインを作成してお客様確認、 そこからマークアップをして、できたモックアップを再びお客様確認、 いよいよCMSを構築して、構築も完了、 入力等をして、公開日にサイトをローンチします。 もちろん案件によってプロセスは前後しますが、だいたい一般的な流れではないでしょうか?(ここらで押す) さて、ここにお客様コウフン度グラフを表示してみましょう。 (アニメーション) さあ、これ、みなさんいかがでしょう?「ないない」という方もいるとは思うのですが、 結構 「わかる!」てなりませんか? あくまで最初にご紹介した私のプロフィールやスキルと、ご自分の背景を照らし合わせて、 比べて見ていただければいいんですが、どうでしょう。 簡単に説明しますと、 まず最初、受注時のお客様コウフン度はだいたい0〜10の間、 で、打ち合わせで計画に実現性が見えると、興奮度ややアップ、 それから、取材というちょっとしたイベントでお客様のテンション、グッとに上昇します。 それからデザイン作成、モックアップ作成で徐々に興奮度は上がります。 で、いよいよCMSを構築して、さあ、マニュアル持参で使い方のレクチャーに行くと...ドーン!!!!!! ここでコウフン度、大暴落する訳です。 ローンチ時には当然喜んではいただけますが、 CMSに手こずったせいか、興奮というよりホッとする、という感じ。 ...いかがでしょうか? こうした経験のある制作者の方、いらっしゃるんじゃないでしょうか?? 程度の差こそあれ、私は、しょっちゅうです。 つまりなにがいいたいかというと、 Web制作を進めるにあたって、お客様の興味・関心・興奮度は、 スムーズな進行や原稿提出などへのご協力に、どうしても必要なものです。 ただ、それがCMSによって大きく下がるケースがまま、あるという事が言いたかった訳です。 さて、まあただ嘆いていても仕方ありませんので、 原因についても考えてみました。
  10. じゃあなぜ、興奮度は暴落するのでしょう?
  11. まず1つは用語。 もちろん「モジュールテンプレート」とか「カスタムタクソノミー」なんて用語は お客様に知っていただく必要はないのですが、 実はエントリー、カテゴリーなど簡単なカタカナ語から、 年配の社長さんに至っては「再構築」や「投稿」すら不可解な用語だと、ご指摘いただく事もしばしばです。 MTでいう「ブログ」も、ローカルでは誤解を招く単語の筆頭です。 他にも、エントリー編集の最後に押すボタンラベルの「公開」「更新」など違いすら 混乱の元になっています。 もう1つはナビゲーション。次にどこを押せばいいのかが分からない。 メニューを可能な限り非表示にもしますが、それでも押すべきボタンを誤ってしまう。 もちろんこれは、ボタンのラベルになっている用語の問題もあるでしょう。 そして最後がWYSIWYG。「ワードと同じですよ」なんて説明は通用しない。 なぜならワードを使わないお客様も多いのですから! また、どれだけ豊富なスタイルやテンプレートを用意しても、 番号付きリストや画像回り込みでレイアウトが崩壊する事故を未然に防ぐのは容易ではありません。 いかがでしょうか?
  12. 要するに、
  13. UIですよね! さて、それではなぜ、UIが原因で、CMSが決められないというのでしょうか。 それはズバリ、
  14. しかも、
  15. さらに、
  16. でも対・個々の人間であるCMSのユーザーインターフェースには、 全てのお客様の願いを叶える 魔法のソリューションなんてものは存在しないのでは ないでしょうか。
  17. 愛知県東部発 切実 地元デザイナーの決められないCMS そろそろ、まとめさせていただきます。
  18. 私のような町のデザイナーが扱う案件は、 多くの場合、コンテンツのボリュームにも、求められる技術力にも一定の限度があります。 例えば、jQueryがある程度満足に使えれば、PHPの記述がある程度出来るのであれば、 どのCMSを利用してもサイトを同じように構築する事が可能です。 ただし、システムを包括的に管理する管理画面までは、限られた予算と日程の中では カスタムしきれないのが現状です。 特に「いつでも簡単に更新ができる」という触れ込みで導入するCMSに対して、 『実際見てみたらやっぱりややこしい』というお客様の失望には、 ベンダーとして大きな至らなさを感じずにはにいられません。 今後、究極のUIを持つCMSが登場したとしても、全てのお客様にそれがマッチするとは限りません。 開発者の皆様のご尽力には日々感謝しつつ、 これからもお客様にとっての「最良のWebサイト」を模索して Web制作をやっていきたいと 愛知県東部発、地元デザイナーは、考えております。
  19. さて、ご来場の皆様へ、私からお願いをいたします。
  20. CMS開発会社、プラグイン開発者の皆様へ! ぜひぜひ、管理画面カスタム機能の拡充をお願いいたします! 今は試行錯誤の毎日ですが、 魔法のソリューションの誕生、本当はとても心待ちにしています。 例えばこんなカスタムができれば嬉しいです。
  21. 差し当たってはこんな機能。 もちろん個別のプラグインが実現しているケースもありますが、 一元化していただければ感無量。 ぜひぜひよろしくお願いいたします。
  22. 私と同じ、町のデザイナーの皆さんへ! ぜひぜひ、複数のCMSを提案する事で、お客様に「CMSを選択する」機会を提供してあげてください。 その結果、一般の方々にも「CMS」という言葉がもっと広まればいいなと思っております。 そうすれば、危険な状態でのWordPressの乱用や、 企業ブログにレンタルブログを利用する悲劇を未然に防ぐ事ができます。 これは、製品とユーザーを繋ぐ私たち町の制作者にしか、できない事だと 思っております。
  23. ご清聴、誠にありがとうございました。