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

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

バグ修正のアプローチ(プログラミング初心者向け)

皆さん「バグ」直してますか?

特にプログラムを始めたばかりの人は見たくもないと思ってるかもしれません「バグ」。

見たくないですよね〜。わかります。

while (ture) { print("バグ"); } // つれー

そんな「バグ修正が苦手!」という方や「バグ修正なんかつまらない!」という方向けにバグ修正のアプローチを朝までには伝えることができたらと思います。
この記事を読み終わった後、きっとあなたはバグを修正したくてウズウズすることでしょう。

ちょっと長いので逆から読んでもらっても構わないです。

目次

  • エラーログを読もう
  • 再現手順を確立させよう
  • 何が原因かを考えてみよう
  • 仮説を検証しよう
  • 修正案を立てよう
  • 修正箇所の影響範囲を調べよう
  • 修正案を元に修正しよう
  • テストをしよう
  • コードをレビューしてもらおう
  • 修正をリリースしよう
  • まとめ
  • 初めまして私はCzといいます

エラーログを読もう

なんといっても、まずはエラーログを読みましょう。ここには発生した時点の情報がたくさん詰まっています。

続きを読む

初めてPMと実装の二刀流を経験して成長を実感した6つのこと

初めまして!早くも2年目になりました欲張りMatzです(☝ ՞ਊ ՞)☝ウィー

フルスタックエンジニアを目指して日々修行中でございます。 会社ではサーバーサイドエンジニアとして仕事をしています。

今から約8ヶ月前(このとき入社してから約7ヶ月)、 欲張りな私はある社内サイトのリニューアル業務にて、プロジェクトマネージャー(以下PM)を担当することになりました。 そこから成長を実感した6つのことを書きたいと思います。

その前に、担当したプロジェクトの概要と、 解決すべき問題点を共有しておきますね(☝ ՞ਊ ՞)☝ウィー


担当したプロジェクトの概要

  • リニューアルするサイトは、WordPressで開発された社内の情報共有サイト
  • コンセプトは「見やすい!探しやすい!おしゃれ!」
  • チームメンバーは計9名(依頼者は別で2名、役割重複2名)
    • インフラ周り 2人
    • デザイナー 1人
    • PM兼WP実装1人
    • フロントエンド兼WP実装1人
    • 大先輩サポート 4人
  • プロジェクト期間は6ヶ月間


解決すべき問題点

  • 検索しても欲しい記事が見つかりにくい
  • 記事を投稿するにもDBの事情で遂行しにくい
  • そもそも連語検索出来ない
  • ページ表示速度が重い

etc.

当然、欲張りMatzなので「やります!!!」とは言っては見たものの、プロジェクトというものを全く知らず、頭の中には「プロジェクトX」しか湧いてきませんでしたね。

(☝ ՞ਊ ՞)☝ウィー


とにかくがむしゃらにやって見た結果

見事に納期ギリギリでしたが上記の解決すべき問題点を解決し、付加的にこちらから提案した内容の実装を終え、 満足できる状態でリリース完了することが出来ました! 結果までの課程をすっ飛ばしていますが、一言で言うと、

大変だったけれど、チームで働くっていいな

ですね。

今プロジェクトで成長した6つのこと

1. 知ったかぶりは何もいいことがない

当初私は、「理解できない自分」が許せなく、いわゆるプライドが高い人間でしたため「分からないことを分かったふり」をしていました。

しかし、PMとして業務を遂行するにあたり、要件定義、仕様の決定、システム設計などを知ったかぶりでこなせるはずもありません。。

そんな中、別プロジェクトでPMを務めていた上司が、知ったかぶりをせずチームメンバーに純粋に質問をしている姿をみて「何も恥ずかしくないし、むしろかっこいい」と感じ、私のつまらない意地っぱりは気づけば解消されていましたね。

結果、依頼者との認識の齟齬なくプロダクトをリリースすることができました。


2. ユーザーというものを背負う責任感

最初は楽しくて設計から実装まで行なっていましたが、リリース1ヶ月前あたりになると、次の言葉が冷や汗と共に発せられたのを思い出します。

今自分が開発しているこのプロダクトを使う人は本当に喜ぶのだろうか

その時に、自己満足の虚しさを知ったような気がします。
リリース後の依頼者、ユーザーからの反応を見て、 「私の考えた最強のシステム」より「ユーザーのことを考えたシステム」のほうが依頼者もユーザーも喜んでくれることに気づきました。

相手のことを考え抜いて喜ばせることにとてもいい気分を覚えました。

これって、好きな異性と仲良くなるためにはどうすればいいか本気で考えるのと近しいと思いませんか?( ´థ౪థ)


3. チームワークを最大化させる要因は心地よいコミュニケーション

なぜチームで仕事をするのかと考えた時に、「良いものを作ることは、物理的にも精神的にも1人では出来ないから」なんじゃないかなと思っています。

そんなチームのメンバーは当然全員「人間」な訳で、人間を理解せずに円滑なコミュニケーションは望めません。

笑っていると楽しいし、それでいて真剣な仕事の相談も出来たらアイデア出まくりですし頑張ろうという気になります。それが循環しているすごくいいチームでした。

これが、一つのゴールを目指し、いいアウトプットを出すチームの「助け合い」なんだなぁと深く感じましたね。


4. 実装は、Computerとの会話

PMもやりつつ、WordPressの実装も行なったのですが、WordPressは便利と思う反面、融通が効きにくい仕組みでもあります。

自分がしたいことをComputerがわかるように記述してあげるというのが大事で、それをするためにはWordPressさんのことを知らないと出来ないことです。

結果、全てにおいて相手のことを知らないと上手くいかないということですね。

その場しのぎで書いてしまったコードから、1ヶ月後くらいにツケが回ってきましたし。。。
(☝ ՞ਊ ՞)☝ウィー(☝ ՞ਊ ՞)=☞)՞ਊ ՞) ←こんな感じ


5. スケジューリングの重要性と難しさ

今回のプロジェクトで自分に一番足りないなと感じたのが、プロジェクト全体を見通して大枠のスケジュールを組み立てることと、それを管理することですね。

自分一人の予定であれば、「気合いダァーーー!!!!」といって根性で納期を守ればいいですが、チーム全体となると話は違います。

他のプロジェクトと並行で動いているメンバーもいます。

そんな中、大先輩が大枠のスケジュールの引き方を指導してくれ、一気にプロジェクト完遂までの道のりが見えるようになりました。

今当初の自分にアドバイスをするのであれば、「プロジェクトが完了した時を具体的にイメージして、その時全てがどうあるべきかを考えろ」といいますね。

考えれば必然なものは思いつくし、足りないものは後からでも補えば良いので。


6. 要件定義とシステム設計がある程度できたらチームで認識合わせのキックオフをすべき

今プロジェクトは完全に0からのスタート(元データ以外)だったので、事前にリスクの洗い出しとヘッジ案を練るべきでした。

しかし、それをしなかった結果、行き当たりばったりの開発になった部分があり、チームに迷惑をかけてしまいました。。。

円滑にチームとして動いていくためには、スタートラインで認識の齟齬を無くし、ゴールを共有することが重要だと学びました。


最後に

6ヶ月間のPMと実装の二刀流経験を通して、PMの重要な役割とは、「相手のことを考えた上でのコミュニケーションを如何に取っていくか」なのではないかと感じています。

結果的にリリース後にユーザーからいいコメントをもらえたり、追加の依頼が来たりと、楽しい保守・運用が出来ています。

これも、相手のことを考え抜いたチームだからこそ、ユーザー、依頼者から期待をされるのだと思います。

また、PMと開発の二刀流ということで、システム設計や、工数管理も、本来「実装を依頼する人と実装を依頼される人」のどちらも経験しながらだったから円滑に進められたのかなと感じます。

結論としては、やはり勉強あるのみですね!

技術力もあり、PMも円滑に回せられるように日々努力していきます!欲張り!

(☝ ՞ਊ ՞)=☞)՞ਊ ՞)(☝ ՞ਊ ՞)=☞)՞ਊ ՞)(☝ ՞ਊ ՞)=☞)՞ਊ ՞)



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

Fusion360を使って自社キャラを作ってみた話

初めまして!あっという間に新卒2年目になりましたmkです。

プランナーを目指すべく日々突き進んでいますo(`ω´ )o

普段からどんどん新しいことにチャレンジできる環境なので、時々振り返ってみるのですが、「忘れてしまう」ことって多いのではないかと思っています。

ソフトも使ってないと使い方を忘れてしまうので、定期的に触るの大事…!

今回、自分の勉強(大学時代の思い起こし)も兼ねて、Fusion360というソフトを触ってみたので、紹介していきたいと思います。


概要

Fusion360は、Autodesk社が提供している「3DCAD」ソフト。(CADとは

3Dモデルを作成することで、2次元で考えているものを組み立てたり、シミュレーションをしたり、3Dプリンタで出力したりすることが可能です。

www.autodesk.co.jp

というと、堅苦しい感じがするので弊社のキャラクターである「かんごるーちゃん」を作成していきます。

完成図はこんな感じ↓↓

f:id:aimstogeek:20180529175107p:plain
完成図

※3DCADソフトにもいくつかあり、私はFusion360お初でした。

※専攻が機械だったので、メカCADベースの説明の可能性がありますがご了承ください。


1.モデルを作成する

平面を選択してスケッチをします。

回転ツールや押し出しツールを使って、書いた平面を立体に。

f:id:aimstogeek:20180529174741p:plain
※今回はお試しなので寸法等は適当です…


2.コンポーネント化する(アセンブリ

シミュレーションをしたりするためには、それぞれのパーツ(コンポーネント)が組み合わさってできていることをソフトに教えないといけません。

コンポーネントを別々に作成してから組み合わせていく(アセンブリする)ものだと思っていたのですが、Fusion360は一通り作成したあとにコンポーネント指定ができるようです。

コンポーネント同士に拘束をかけて組み合わせていきます(ジョイント)。

耳・腕・足は回転できるように、ハートのオブジェクトは上下移動できるように条件設定!

f:id:aimstogeek:20180529190840p:plain
※拘束条件も適当…


3.見た目(外観)を調整する

モデルを作成しただけでは、冷たい感じのかんごるーちゃんなので、外観の調整をします。

外観だけでなく、素材を指定したりすることでシミュレーションをより実際のものに近づけることが可能です。

今回は見た目だけなので、適当に色や質感だけで決定。

f:id:aimstogeek:20180529180858p:plain
パウダーコート(黄)で代用

のっぺらぼうだと悲しいので、部品の面上に、画像をあてることができる「デカール」機能も使ってみました。

これで、最初に載せたかんごるーちゃんの完成!

f:id:aimstogeek:20180529175107p:plain
デカール


4.動かしてみる

せっかくコンポーネント化したので、「モーションスタディ」機能を使って動かしてみます。

部品がどのように動くかを表現することが可能です。

耳と腕+ハートの動きを設定。(※ジョイントの際の拘束条件が反映されます)

f:id:aimstogeek:20180529182013p:plain
心の目で動いているのイメージしてください…


5.レンダリングしてみる

Fusion360は、3.で設定した外観(素材)や環境設定をふまえてレンダリングすることが可能です。(レンダリングとは

ローカルかクラウドを選択することができ、クラウドで行うと4.で設定したモーションスタディの動きを再現してくれる様子。

レンダリングを実行…

するとかんごるーちゃんの目だけ消えてしまった。

調べると、透過処理をしている画像をデカールすると、レンダリングの際に消えてしまうことがあるようです。

f:id:aimstogeek:20180530165205p:plain
悲しい…


6.その後…

Fusion360はENTITIとのアドインでAR/VRモデルに変換できる!というのを見つけたため選んだのですが、かんごるーちゃんを変換しようとしたらソフトが落ちる。

簡単なモデルで変換してみたものの、変換データのメールがこない(サーバーで止まっているという記事を見かけた)。

ということで当初の目的だったARモデル化はできなかったのですが、3Dプリンタでグッズを…!などと期待が膨らんだので結果的にはとても良い機会でした。

Fusion360は今回紹介した機能の他に、シミュレーションや図面に起こすことができます。

ぜひ、興味がある方は体験版等アカウントの種類も複数用意されていますので、お試しください(╹◡╹)


まとめ

一言でまとめると、

前に進むことも大事ですが、たまには振り返ることも大事!というお話でした。 (1年目の学びのひとつ)



ということで、

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

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