株式会社クイックのWebサービス開発blog

HAPPYなエンジニア&デザイナーのブログです

WordPressの記事作成効率化!ビジュアルエディタをカスタマイズして実際の記事と同じ見た目にする方法

こんにちは。フロントエンドエンジニアのhikaruです。

WordPressの編集画面には、

の2種類のエディタが用意されています。

テキストエディタではHTMLタグを記述して編集するのに対し、ビジュアルエディタでは文字をベタ打ちしていくだけでHTMLが自動で生成されます。

編集が楽なビジュアルエディタですが、実際の記事の見た目とは異なります。

でもいちいちプレビューを確認しながら編集するのって、めんどくさいですよね……

この記事では、ビジュアルエディタをカスタマイズして実際の記事と同じ見た目にする方法をお伝えします!

完成形はこのようになります

● ビジュアルエディタ

f:id:aimstogeek:20180525114409p:plain

● 実際の記事

f:id:aimstogeek:20180525114351p:plain

スタイルはもちろん、文字の改行位置まで同じにすることができます。

何回もプレビューする手間が省けるので、記事作成が効率化できますね(๑•̀ㅂ•́)و✧

カスタマイズはとってもカンタンです。

1. functions.phpに以下を追記する

使用しているテーマのfunctions.phpeditor-style.cssを読み込む宣言を記述します。

これでビジュアルエディタにeditor-style.cssで設定したスタイルが適用されるようになります。

add_editor_style( 'editor-style.css' );

2. editor-style.cssを用意する

editor-style.cssを作成し、style.cssから必要なスタイルのみコピーします。

これだけで、エディタ上の表示が実際のサイト上での表示と一緒になります。

※ スタイルが反映されない場合、一度キャッシュを削除してみてください。

これでもいいけど…

よくブログなどで紹介されている方法はだいたいコレだと思います。

ですが、同じスタイルを2箇所に書くことになるので、正直効率が悪いです。

また、スタイルの追加や修正の際に2つのファイルを変更する必要があり、メンテナンス性がよくありません。

editor-style.cssの中で@import url("style.css");としてstyle.css全体を読み込んでしまう方法もありますが、

不要なCSS読み込みにより表示速度が遅くなるため、オススメできません。

次の項目で、ソースを一元管理してカスタマイズをラクにする方法をお伝えします!

Sassを使用している場合は参考にしてみてください。

3. Sassで記事内スタイルを一元管理する

1. 記事内スタイルを単独ファイルに切り出す

記事内スタイルを設定している部分を切り出して、独立したひとつのパーシャルファイルを作成します。

<div class="article-body">
    <?php the_content(); ?>
</div>

今回は上記のように、記事本文出力エリアをarticle-bodyというdivで囲ってマークアップしたので、_article-body.scssというファイル名で作成しました。

このファイルに、記事内で使用するタグのスタイルを設定していきます。

他のスタイルと競合しないようarticle-body配下のセレクタに対してスタイルをあてていきます。

● _article-body.scss

.article-body {

    h2 {
        margin: 2em 0 1em;
        font-size: 2.2rem;
        font-weight: normal;
    }
// 以下略

2. editor-style.scssファイルを作成

Sassフォルダ配下、style.scssと同じ階層にeditor-style.scssファイルを作成し、editor-style.cssコンパイルされるようにします。

style.scss editor-style.scssそれぞれで、(1)で作成した_article-body.scssをインポートします。

これで_article-body.scssで編集した内容が、style.css editor-style.css 両方にコンパイルされるようになり、2つのファイルを編集する必要がなくなりました。

style.scssで読み込んでいるパーシャルはこんな感じです。

@charset "UTF-8";

// BASE
@import "base/reset";
@import "base/variables";
@import "base/functions";
@import "base/layout";

// MODULES
@import "modules/form";
@import "modules/button";
@import "modules/heading";
@import "modules/card";
@import "modules/tag";
@import "modules/link";
@import "modules/pagenavi";

// PAGES
@import "pages/top";
@import "pages/article";       // 記事ページのレイアウト
@import "pages/article-body";  // 記事本文内で使うタグのスタイル
@import "pages/404";

editor-style.scssはこんな感じになりました。

@charset "UTF-8";

html {
    margin: 0 auto;
    padding: 40px 8% 64px;
    max-width: 1100px;
    background-color: #fff;
    font-size: 62.5%;
}

body {
    margin: 0 auto;
    max-width: 640px;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.6rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

// RESET
div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, table, td, th {
    margin: 0;
    padding: 0;
}

img, svg {
    border: 0;
    vertical-align: bottom;
}

* {
    box-sizing: border-box;
}

table {
    border-spacing: 0;
    border-collapse: separate;
}

li {
    list-style: none;
}

// IMPORT
@import "base/variables";
@import "base/functions";
@import "pages/article-body";
  • html bodyには、フォント等のサイトの基本設定の他に、余白や幅を設定しています。

  • ビジュアルエディタはiframeで表示されています。iframeの中のhtmlbody の余白や幅を調整することで、実際の記事本文エリアのサイズと合わせることができます。

  • そのため、style.scssで読み込んでいるreset.scssはこちらでは読み込まず、必要なリセットのみeditor-style.scssの中に直書きしています。

  • _aricle-body.scssの他に、変数など必要なパーシャルがあれば適宜読み込みます。

3. エディタに独自のクラスをつける

ビジュアルエディタを表示しているiframebodyには、下記のようなクラスがついています。

<body id="tinymce" class="mce-content-body mceContentBody webkit wp-editor wp-autoresize html5-captions" data-id="content" contenteditable="true" style="overflow-y: hidden;">
// 記事本文入力エリア
</body>

(1)では、article-bodyというクラス配下のセレクタに対してスタイルを設定したので、コンパイルされたCSSは以下のようになっています。

.article-body h2 {
    margin: 2em 0 1em;
    font-size: 2.2rem;
    font-weight: normal;
}

このままだとビジュアルエディタにスタイルが適用されません。

よく紹介されている方法として、セレクタにエディタのデフォルトクラスを追加するというものがあります。

.article-body h2, .mce-content-body h2 {
    margin: 2em 0 1em;
    font-size: 2.2rem;
    font-weight: normal;
}

これでも解決ですが、サイト側で使っていないセレクタを指定してCSSの記述量が増えるのってイヤですよね。。。

せっかくスタイルをひとつのファイルで管理できるようになったので、CSSはこのまま、エディタにスタイルが適用されるようにしちゃいましょう。

というわけで、エディタのbodyにカスタムクラスを付与するおまじない。

if ( !function_exists( 'add_editor_classname' ) ) {
    function add_editor_classname($init_array) {
        $init_array['body_class'] = 'article-body';
        return $init_array;
    }
}
add_filter( 'tiny_mce_before_init', 'add_editor_classname' );

エディタの設定を初期化するフィルターフックを利用します。

'article-body'を、記事本文を囲っている要素のクラス名に変更してください。

これでエディタのbodyにサイト側と同じクラス名が出力され、設定したスタイルが反映されるようになりました!

ファイルの切り分けとカスタムクラスの付与さえしてしまえば、あとは自動でstyle.csseditor-style.cssに同じ内容が出力されるので、

スタイルを1ファイルで管理しつつ、エディタのカスタマイズがカンタンにできるようになります(๑•̀ㅂ•́)و✧

まとめ

ちょっとの手間と工夫で、記事の編集もスタイルの管理も効率化できますね。

  • 必要に応じてエディタのカスタマイズもしてみましょう!
  • 記事内で使うタグのスタイル設定ファイルは一元管理しましょう!

というお話でした。


\\『明日のはたらくを創る』仲間を募集中!! // 919.jp

アベンジャーズからチーム力を学ぼう!な話

みなさんこんにちは。
企画およびマネジメントを担当するいっちーです。

最近、「アベンジャーズ インフィニティ・ウォー」観ました。
アベンジャーズ面々のかっこよさは去ることながら、
ヴィランとの戦いは毎回ひやひや、もやもやしますね。

今回はアベンジャーズを元に人が成長するために必要な要素について、お話します。

プロジェクト運営や組織として、
誰しも通る道だと思いますが、みんな成長したいと思っています。
セミナー行ったり、本を読んだり、実際にものを作ってみたり。。

組織でも大体同じです。
ケーススタディや哲学、先人の知恵を学んで、組織の文化を作ることで完成されていくものです。

さて、ここまででの話でいうと、
前述で得られるものは「個人力」
後述で得られるものは「組織力
もう一つ、それらでは得られない、大事なものがあります。

「チーム力」です。

「個人力」「組織力」をアベンジャーズに例えると、
「個人」では、マイティ・ソーキャプテン・アメリカの様な圧倒的なパフォーマンスです。
「組織」では、シールドやアベンジャーズの様な目的に沿って存在するシステムです。

ただ、これらだけの存在では、強大な敵を倒すことは出来ません。
最後に大事になるのが、「チーム力」なのです。

チーム力を分解するとこの2つになります。

・コミュニケーション力
・互いを作用し合う力

例えば

脳でいうと
ニューロンシナプスのような関係です。

リーダーシップ論に置き換えると
リーダーとフォロワーのような関係です。

アベンジャーズでいうと
アイアンマンとキャプテン・アメリカのような関係です。

お互いの個性を尊敬し、フォローしあい、語り合い、情報交換しあい、リスペクトしあい、相思相愛になることです。
最後には互いの絶対の信頼が、個人では立ち向かえないより強大な敵を討ち滅ぼす鍵になります。

その個人の関わり、集まりが、チームになり、複雑に絡み合った組織へとなります。
チーム力が成長出来る環境がある所は、個人の大きな成長にもなります。
アベンジャーズは、アイアンマンの成長の物語のようなものですよね!

つまり何が言いたかったのかというと、

「ロバートダウニーJrはカッコいい」

チーム力を学び人を育てるのがクイックの人材マネジメントです。
成長を感じたい方は是非一緒にお仕事しましょう!

good luck!

いっちーは帰ってくる(icchi will return)



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

【Windows】管理者権限への昇格(PsExec)

お久しぶりです。シスアド担当のスカイ(甘党)です。

一年半ぶりの「あるあるPC管理者の悩み」を書いてきますね。

第二回あるあるPC管理者ネタはPsExecを利用して、
リモート接続しないで管理者権限が必要なソフトをインストールしたい!」です。

今回のネタは主にソフトの再インストールをこっそりしたい時に役立ちます。
 ・ リモート接続せずにインストールかっこいい><
 ・ 業務上必須ソフトの動作不具合に伴う再インストール対応

※PsExecが利用できる前提での話となります。
※PsExecは「PsTools」というツールキットの一部です。

【今回の目的】
 ウィルスバスター先生をこっそり再インストールしてみる

【動作確認環境】
 Windows7Pro_32bit・64bit

【他の前提条件】
 対象のPCへの管理者権限があるユーザーでコマンドプロンプトを実行している事。
 ファイルサーバー上にウィルスバスター先生インストーラ(AgentSetup.msi)を準備。

以下のコマンドを実行します~。

PsExec -s -i \\「対象PCのIPアドレス」 msiexec /i "\\ファイルサーバーのパス\AgentSetup.msi" /quiet /norestart
 ※/quiet /norestart ・・・・こっそり再起動しないように

待つこと十数分・・・・以下のメッセージが表示されれば成功\(^o^)/

msiexec exited on [対象のIPアドレス] with error code 0.


いや~無事に成功してよかったです。
対象のPC利用されている方はなにが起きたのか一切気づいてない!!

あ、、、、、、、
この内容だと「管理者権限がないユーザーにも管理者権限が必要なソフトをインストールさせたい!①」の続きになってない!!!!
aimstogeek.hatenablog.com
次こそ!あるある~~!!



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

UIデザインにおける8つの黄金律について考えてみた〜前編1

こんにちは、最近辛い食べ物にチャレンジしているデザイナーのAchanです。

UX(ユーザーエクスペリエンス)を向上するため、Ben Shneiderman(ベン・シュナイダーマン)氏が提唱した「UIデザインにおける8つの黄金律」があります。

20年以上前のガイドラインですが、現在においても十分業務に活かせるかと思い、今日はこれについてお話ししたいと思います。

〜〜今回はここまで〜〜

5. エラーに簡潔に対処できるようにしよう
6. アクションを簡単にやり直せるようにしよう
7. ユーザーが主導権を握っていることが分かるようにしよう
8. 短期記憶の負担を減らそう

出典:Ben Shneiderman「ユーザーインタフェースの設計 第2版」日経BP社 1995年
関連URL: [O] シュナイダーマンのUIデザインにおける8つの黄金律

一見当たり前のことを主張しているように見えますが、いざ実践するとなかなか難しく、自戒を含めて今後の業務に活かせるように取り組んでいきたいです。

1. 一貫性を追求しよう

これは基本ですね。同じサイトや同じサービスだとユーザーに感じてもらうために、UIやイメージなどの表現を揃えた方がいいです。不揃いだとユーザーを混乱させたり、不信感を与えたりする恐れがあります。

例えば下記の例。最初に目にするテキストリンクがオレンジ色だった場合、ユーザーは「オレンジ色」が押せると認識します。しかし、同一階層の別のページに行くと、テキストリンクのアイコンがなくなり、テキスト色もオレンジから水色に変わっているため「ここは押せるか、それとも強調したいのか?」と混乱してしまいます。

またレイアウトとテキストの文言もガラッと変わってしまったので、「ここは同じサイトなのか?」と不信感を抱かせる可能性があります。

f:id:aimstogeek:20180425145859j:plain

改善方法としては、共通した機能の見た目やラベルには、一貫性を持たせましょう。

f:id:aimstogeek:20180425145914j:plain

2. よく使うユーザーにはショートカットを提供しよう

WindowsMacではたくさんのショートカットキーが提供されています。Macの場合、コピー&ペースト(command + C およびcommand + V)、終了(command + Q)などが挙げられます。

統一性や一貫性に影響しない前提で、ヘビーユーザーに頻繁に使われる機能を考え、それに対応するショートカットを用意した方が親切ですね。
ショートカットの例としては、ショートカットキー、Fキー、隠しコマンド、マクロ機能などが挙げられます。

3. 有意義なフィードバックを提供しよう

これはかなり大事だと思います。何かしらの操作に対してシステムが無反応だと、ユーザーが不安になりますよね。

例えば写真や画像をアップする際に、ローディング処理が1秒を超え、さらに何もメッセージが表示されなかったら、ユーザーが待っている間に「ちゃんとアップされているかな?」と疑問を持ちます。もし10秒以上経過してもまだ同じ画面だと「あれ、何かあったの?」と不安やストレスを感じてしまう可能性大です。

f:id:aimstogeek:20180425145928j:plain

それを防ぐため、ローディングアイコンなどを入れましょう。そしてユーザーが「アップロード中だから待てばいいよね〜」と認識することができます。

ただし、処理にかかる時間が1秒以内なら、ローディングアイコンの表示は問題ないのですが、1秒より長くかかる処理の場合は、あとどれくらいかかるかを示す進捗状況のフィードバックの提供が必要になります。一般的に処理済みのパーセンテージを表示したりプログレスバーを用いたりします。

また、スマホ利用の場合は電波状況の悪化に陥ることがあります。ローディングアイコンがずっとクルクル回っている状態はよくないので、通信状態に関するメッセージ「通信環境が安定していません」のように表示させた方が良さそうですね。

f:id:aimstogeek:20180425145943j:plain

一方、ユーザーの操作に対して何もかもフィードバックを提供する必要はないかと思います。なぜかと言うとすべての操作に対してフィードバックが起こるとユーザーがその中の重大なフィードバックに気づかない(認識しない)かもしれないのです。

4. 処理の完了が明確に分かるようにしよう

確かにこれも重要ですね。一連の操作を終えたときに、システムがしっかりと返答をくれたら、ユーザーは安心感や達成感を得られると同時に、次の操作を行うこともできます。

もちろん処理にかかる時間と処理の種類に依存するので、場合によってはシステムが現在どんな作業をしているのか、またその処理時間がかかっている理由をユーザーに伝えた方がいいでしょう。

例えば、時間がかかりそうな場合、ユーザーがほかの作業や操作を始めてしまう可能性があるので、そのうちにユーザーはシステムが処理されていることを忘れてしまうかもしれないです。そのため、処理が完了したことを音でフィードバックするといいでしょう。

あ、気づいたら長文になりました。今日はここまでにしましょう。また次回にお話しできたら嬉しいです。

それでは、みんなさん、良いゴールデンウィークを♪

------------------------------------------------------------------------
\\一緒に『明日のはたらくを創る』仲間を募集中です!! //
919.jp

オシャレで綺麗なオフィスで働く

最近オシャレになったオフィスに引越したので紹介したいと思います。
電球がぶら下がってたり、緑がいっぱいだったり、天井が抜かれて配管むき出しになったり、会議室がガラスになったりしてます!

うどんより蕎麦派です。
matsBです。(๑•̀ㅂ•́)و✧


では早速、オシャレオフィスを写真と共に解説していきたいと思います。

執務スペース(南側)

f:id:aimstogeek:20180420105939j:plain 配管むき出しでシーリングファンが回って、電球がぶら下がってます。
以前の執務スペースと比べると、天井が高くなり開放感が全然違います。

執務スペース(北側)

f:id:aimstogeek:20180420110132j:plain 緑のソファーで木がいっぱいあって、天井から草が生えてます。
個人的にはこのソファーが好きで、MTGをここでやったりしてます。

会議室

f:id:aimstogeek:20180420110654j:plain なんと壁がガラスです!うちのデザイナーのこだわりらしいです!
最初は隣の会議室の人と目が合ったりしてちょっと恥ずかしかったんですが、2週間ぐらいで慣れて今はもう違和感を感じなくなってます。

MTGスペース&ランチスペース

f:id:aimstogeek:20180420111717j:plain カウンターテーブルがあり、そこでも仕事ができます。
昼食時には、お弁当などの内食の人が集まって食べたりもしてます。

カウンターテーブル

f:id:aimstogeek:20180420112027j:plain 冷蔵庫や電子レンジを置いてます。
カウンターテーブルのスペースが好きで、ここで1on1をやったりしてます。

さいごに

実はこのデザイン、外注ではなくうちのデザイナーがデザインしたらしいです!
近くにいるので今回のコンセプトを聞いてみたら
「温もりがあって落ち着くけど、今風な感じ」
「今までの執務室が日常の塊だったのでそこからの脱却」
らしいです!
こだわりポイントを聞いたら「めっちゃあるからこれ見て」と言われ、30ページぐらいある資料を渡されました。
全部書くとキリがないですが、全部にこだわってるようです!笑

ということで、オシャレになったオフィスで働くT親方に感想を聞いてみました!
matsB「どうっすか!?オシャレなオフィスは!?」
T親方「暑いです」(空調から一番遠い席だから)
matsB「テンションとか上がりません!?」
T親方「まぁどこにいても、テンションは変わらないですよね」
matsB「・・・・」
僕だけはしゃいですいませんでした・・・



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

残念なプロジェクト管理を見てきたので誰かに伝えたかった話

こんにちは。 システムアーキテクトを担当している「こってぃ」でございます。
4月に入り、重度の花粉症に悩まされておりますが、
この時期はお花見とか外でビールを飲む機会も増えてくるので嫌いになれません。

さて、最近お笑いのライブに行ったところ、
リズム良く「あるあるネタ」を披露しているコンビがまだ頑張っておりました!
ブームは過ぎ去ったものの、観客は彼らの登場にとても喜んでおり、拍手喝采でした。

そんな彼らにあやかって、
今回はシステム導入プロジェクトにおける残念な「あるあるネタ」をお届けします!

弊社内のプロジェクトではなく、私個人が今までに見てきたものをお話します!

お仕事の合間に「あるよね~」と共感いただいたり、
「こんなプロジェクト嫌だ」と反面教師にして頂けると嬉しいです:D

このプロジェクトって美味しいの?

f:id:aimstogeek:20180412165903j:plain
あまりにもメンバの入れ替わりが激しかったり、
色んな開発会社が参画している場合、
プロジェクトの目的を共有出来ていないことがしばしば見受けられます。

そうなると、プロジェクトチームの熱量も下がってきて、
消極的なプロジェクト参加になってしまいがちです。

メンバが単一のプロジェクトのみに携わっている場合は別ですが、
そうでない場合、優先度の低いプロジェクトになってしまいますよね。

自分がメンバとして参画している際に、
とりあえず仕事を投げて終わりみたいな事されたら嫌ですよね。

メンバあってのプロジェクトです。
きちんとプロジェクトの目的を共有して、
成功へ導いていきましょう。

課題共有会が課題解決報告会に

f:id:aimstogeek:20180412165941j:plain
共有されるのは解決済み課題や、解決方法が明確になっている課題のみ。。。

新たに発見されて、解決の目処が立っていない課題は公表されません。

そんな課題共有会に出たことがある方もいらっしゃるのではないでしょうか。

「何か解決してたら前進している感でるし良いや。」って空気になっていますよね。

これ最悪です。

隠蔽している問題が表面化した際に生じる影響を考えるよりも、
その場を上手く乗り切ることを優先させている典型的な例ですよね。

そんな会議に出会ったら、
何のための会議なのかをもう一度問い直しましょう。

「この会議って課題潰した自慢大会でしたっけ?」

また、報告を受ける側としては、報連相をしやすい環境づくりは大切です。

常日頃、不都合な報告があった場合に詰めまくる姿を見せていては、
報告することをためらってしまうこともあるかもしれませんね。

永遠の「90%」

f:id:aimstogeek:20180410172046j:plain
開発のチームから提出されたWBSを見ると全部オンスケ、進捗率はいつ見ても90%になってます。

でも皆帰りは遅いんですよね。なんでかなー。

確認すると、報告されているWBSとは別のより細かいWBSがあって、
それを見ると実は遅延になっているという事もあります。

管理する側が正確な状況を把握出来なければ、何も手を打ちようがありません。

とはいえ、プロジェクトマネージャだけでなく、
報告をあげてくれるチームリーダも往々にして多忙を極めています。

そんな時にPMOのように遊軍的な人が、
プロジェクト管理の手助けをしてあげると上手く回るのではないでしょうか。

日はまた変動を繰り返していく

f:id:aimstogeek:20180412165828j:plain
計画時のスケジュールと比較すれば明らかに遅延しているのに、
報告資料ではなぜかオンスケになっています。

進捗ごまかしのテクニックで使われがちなんですよね。
合意無いリスケ。(テクニックでも何でもないですが)

報告側の人間性に問題があると言えばそれまでですが、
異変に気付く力も管理者には求められているのかもしれないですね。

ミイラ取りがミイラになる

大規模なプロジェクトになると、複数の開発チームが立ち上がります。
そこで、チーム毎にバラバラなドキュメント管理やプロジェクト管理にならないよう、
横串で開発チームを管理するチームが立ち上がることがあります。

ただ、開発が進むにつれて、テスト事務局のように、横串で管理するチームが複数出来てしまうことも。。

横串管理チーム同士が連携を取れていないと、毎週開発チームに似たような報告をさせることになり、
結果、開発チームの工数を圧迫するという事態が起きます。

そうなると、複数存在する横串管理チームを横串で管理するチームが発足されるわけですね。

横串管理するチームが自分たちを横串管理出来ずに横串管理される。 図にするとこんな感じかな。

f:id:aimstogeek:20180412150319p:plain

うん、よう分からん。

最後に

今まで見てきて残念だなって思った事例を書いてみました。

実は色んなプロジェクトで同じような事象が起きている様を見てきました。

中には、1つのプロジェクトで全て発生させているものもありました。
結局そのプロジェクトは遅延に遅延を重ねて残念なプロジェクトとして多くの工数を飲み込んでおります・・
(弊社のプロジェクトではないですよ!)

プロジェクトマネージャーやプロジェクトリーダ、
PMOを経験した方なら目にした事があるのではないでしょうか。

そもそも、世の中ではそうならないための色んな施策も紹介されております。

今回話した事例は反面教師として今後に活かしていきましょう。

ほなの。



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

ユーザビリティを考える

こんにちは。”いのっちぃ”です。

WEBで、あるいは街角で、
何がいいたいのかわからない、
意図が読みとれないことでイライラしたことはありますか?

「ああ、あれはそうだなぁ」と具体的なサービスやアプリを思い浮かべた方もいるかもしれません。

今回は、「つかいやすさ」や「わかりやすさ」、すなわち「ユーザビリティ」について、ヤコブ・ニールセン博士の名言を借りて、考えていきたいと思います。

名言は、ヤコブ・ニールセンの名言をツイートするヤコブ・ニールセンbotから引用しています。

ユーザーは忙しい、謎解きなんてまっぴら

ありますよね。ラビリンスみたいなサイト。
「自分の知りたいことは、いつわかるの?」という気持ちになってしまいます。

遅い理由なんて言われても、ふつう興味無いですよね。 サイトはできるだけ速く快適にする必要があります。 弊社のエンジニアも、日々快適なサービス(高速化)を目指して頑張っていますよ。

博士。手厳しい!
ネット上に流通している情報量が爆発的に増えたため、その人にフィットする情報にたどり着きにくくなっているように思えます。
私も情報を発信する際には、より有益な内容を目指していきたいです。

間違うのがあたりまえ

エラーメッセージ2連発。あるある!
入力フォームでエラーが出たけど、どこがダメなのだか、さっぱりわからないメッセージでは、直したいけど、直せなくて困りますね。

自由に入力できるフォームなのに、実は入力して良い文字が決まってる場合も困りモノ。「内容は正しいのに打ち直し...」という気持ちになってしまいます。

さいごに

コンテンツを届ける側は、ついつい、自分たちの伝えたいことばかりを考えてしまったり、効率を優先してしまうことがあります。

また、ユーザーはコンテンツに精通していないことや、 そこまで、熱烈な思いをもっているわけではないことがあるということを思い出し、 ユーザーの視点に立ち返ってモノゴトを考えたいですね。

と、自戒の意を込めつつ、筆を置きたいと思います。



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp