一眼レフ初心者がAdobeを使い倒して簡単にそれっぽくする

こんばんは、フジケンです。
最近一眼レフ買ったのですが、カメラだけでプロのような写真を撮るのは難しいので
そこそこきれいに撮れたと思う写真を「簡単にそれっぽく」することができたのでまとめます。

一眼レフ

買ったのはこれ。
僕は家の事情でPENTAX縛りだったのですが、CanonでもNikonでも良いと思います。

PENTAX デジタル一眼レフ KP ボディ 【ブラック】 KP BODY BLACK 16020

今回使ったレンズはこれ。
ざっくりと近距離〜中距離なイメージ。

PENTAX 単焦点マクロレンズ DFA MACRO 50mmF2.8 Kマウント フルサイズ・APS-Cサイズ 21530

Adobe Bridge

写真を選定するときに使います。

Finderでも十分ですが、クリックしてPhotoshopを直接起動できるのは便利。 サムネイルも見れるし、ホワイトバランスでフィルターかけられたりラベル付けもできます。

Adobe Photoshop

皆さんご存知の最強画像詐欺ツール。 まずは写真を「スマートオブジェクト」にします。

調整内容をレイヤーとして保持できるようになり、
後からやり直しが効くためスマートオブジェクト化はした方がいいと思います。

次に「フィルター -> Camera Raw フィルター」で画像の色味などを調整します。

コツは少しずつ変えるのではなくわざと大きく値を変更して良さそうなところに合わせるのがいいかと。

完成

一眼レフ初心者だけど、カメラめっちゃ楽しい。
猫かわいいよ猫 pic.twitter.com/9SIytdhgzf

— ふじけん (@kenshir0f) 2018年4月8日

あとは「画像解像度」でサイズを小さくすればTwitterにも投稿できるサイズに変えれます。 カメラ楽しい！！！

ティザーサイトをgulpでサッと作る

前置き

1, 2年おきくらいにティザーサイトを作る話が出てくるので、 gulpを使って効率よく実装するときの導入メモ。

作ったのは2ページなので、感覚的には 「とりあえずscssが使えたら良い」くらいの気持ちで入れています。

(Node.jsが必要なので事前にインストール)

導入手順

1. npmでgulpをインストール

ターミナルから

npm install -g gulp

gulpをグローバルインストールするので、既に実行している場合は入れなくて良い。 入ってるかどうかは

gulp -v

で確認できる。

2. よさげなプラグインを追加する

gulp-sass

まずはsassを使えるようにする。

npm install --save-dev gulp-sass

browser-sync

sassやhtmlファイルに変更があった場合に、 自動でブラウザを更新してくれる。

npm install --save-dev browser-sync

gulp-notify

sassのコンパイルで失敗したときなどに エラーをデスクトップ通知を出してくれる。 ;をうっかり付け忘れて保存するとき多いのでこれはありがたい。

npm install --save-dev gulp-notify

gulp-plumber

コンパイルエラーなどがあってもgulpを起動したままにしてくれる。 これがないと毎回gulpコマンドを叩く必要があるので便利。

npm install --save-dev gulp-plumber

gulp-imagemin, imagemin-pngquant

画像サイズの最適化を行ってくれる。 tinypngやimageoptimで毎回圧縮するのは手間なのでこれも便利。

gulp-imageminはjpegとpng両方やってくれるが、pngの圧縮率が低いため imagemin-pngquantでpngをいい感じにしてくれている(と思う)

npm install --save-dev gulp-imagemin imagemin-pngquant

3. gulpfile.jsを作る

プロジェクトのディレクトリでtouch gulpfile.jsを打つ。 エディタから「新規ファイルの作成」などで作っても良い。

4. gulpfile.jsに色々書く

今回ティザーで使ったgulpfile.jsの中身を注釈付けてそのまま書く。

var gulp = require('gulp'); 
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var imagemin = require('gulp-imagemin')
var pngquant = require('imagemin-pngquant')
 
// 画像の圧縮
gulp.task('image-min', function(){
  gulp.src('./src/images/*') // src/imagesにある画像を読み込み
  .pipe(imagemin([pngquant({quality: '60-80', speed: 1})])) // pngの圧縮サイズを指定
  .pipe(imagemin()) // おまじないでもう一回実行
  .pipe(gulp.dest('./dist/assets/images/')); // 吐き出し先を指定
});
 
// gulp起動時に自動更新用のブラウザを立ち上げてくれる
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "./dist/",
      index: "見たいHTMLファイル名.html"
    }
  });
});

// ファイル変更時にブラウザを自動更新
gulp.task('bs-reload', function () {
  browserSync.reload();
});

// sassのコンパイル
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss') // scssの読み込みを指定
  .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')})) //エラーがあった場合に通知 & gulpを止めない
  .pipe(sass({style : 'expanded'})) // cssの書き出し方法を指定
  .pipe(gulp.dest('./dist/css')); // 吐き出し先を指定
});

// gulp起動時にやってくれるやつ
gulp.task('default', ['browser-sync', 'image-min'], function() { // gulp起動時に画像の圧縮と更新用ブラウザ立ち上げを実行
  gulp.watch('./src/scss/*.scss', ['sass']); // scssに変更があった場合上のsassタスクを実行
  gulp.watch("./dist/*.html",    ['bs-reload']); // htmlに変更があった場合上のbs-reloadタスクを実行
  gulp.watch("./dist/css/*.css", ['bs-reload']); // cssに変更があった場合上のbs-reloadタスクを実行
  gulp.watch("./dist/js/*.js",   ['bs-reload']); // javascriptに変更があった場合上のbs-reloadタスクを実行
});

5. ファイル構成

root/
┠ dist/ (書き出し先)
│ ┠ hogehoge.html
│ ┠ css/
│ ┠ js/
│ ┠ assets/images/
┠ src/ (コンパイル前)
│ ┠ scss/
│ ┠ images/
└ gulpfile.js

終わりに

gulp-hamlも入れようと思ったのですが、今回は2ページだけだったので入れませんでした。 ただページ数これから増えない想定だったので、これから導入したらhtmlの手戻りが大きそうだな。。。

久々のhtmlでした。 もっと便利なプラグインがあったら追加していきます。

人が行動を起こすデザインについて

こんにちは、フジケンです。

「人が行動を起こすためには？」についてまとめました。

人が行動するデザインとは？

人が「行動を起こす」には、 動機 、 実行能力 、 きっかけ の3つがないと行動しません。 これを式に当てはめると

になります。

このいずれかの要素(M, A, T)が欠けていると、人は行動を起こしません。 つまり、

人間は条件を満たさなければ、行動しない

と言えます。 では、人に行動を起こしてもらうにはどうしたらいいのか。 これらの要素を詳しく見ていきましょう。

動機(Motivation)

動機とは、「人が行動を決定する際の心的原因のこと」です。 よく分からないので図にしました。

快楽の追求(苦しみの回避)

楽しいからアニメを見る、ゲームで相手を倒すのが気持ちいい、など。 その瞬間・時間の居心地がいいから、人はそれを追求して意思決定をします。 反対のことを言うと、「苦しみの回避」とも言えます。 つい衝動買いしてしまうのは、どちらかと言うと「苦しみの回避」が原因かもしれませんね。

希望の追求(恐怖の回避)

良い大学に入るために勉強する、試合で勝ちたいから練習する、など。 将来のこうなってほしい、こうなりたいという気持ちを追求して、人は意思決定をします。 反対のことを言うと、「恐怖の回避」とも言えます。 貯蓄をするのは将来お金がなくなる「恐怖の回避」ともとれますね。

社会からの承認(孤立からの脱出)

いいね！が欲しいからinstagramを頑張る、母親に褒められたいから家事を手伝う、など。 他人から認められたいという気持ちから、人は意思決定をします。 反対のことを言うと、「孤立からの脱出」とも言えます。 僕がこの記事を書いているのも、みんながLIKEしてくれるのを期待して(

意思決定の優先順位

動機は主に3つあると述べましたが、 この動機が複数絡んだときに、人はどっちを優先して意思決定をするか。

実行能力(Ability)

実行能力とは、「行動するための障壁がどれくらいあるか、ないか」とも言えます。 この行動障壁の難易度を左右する要素は主に6つあります。

1. 時間 時間がかかるものはやらない、 時間がないから行動することが出来ない、など。

2. お金 無料のほうがユーザは行動を取りやすく、 高ければ高いほど行動に移しづらい、など。

3. 身体的な能力 ラーメンが美味しいから毎回九州にランチに行く人はあまりいません。 行動のために身体的な能力を多く必要とすると、人は行動しづらくなります。

4. ブレインサイクル これは例えば、簡単、集中しなくてもできるなど、 精神的疲労が少ないほど、人は行動しやすくなります。

5. 日常生 普段からその行為をしている、みんながやっているなど、 継続して行うために努力を必要としない場合は行動をしやすい。

6. 社会的な逸脱 突然社内で大声で叫ぶなど、 一般的な行動から逸脱している場合は行動しにくい。

めんどくささ > 付加価値

いくら優れた機能を開発したとしても、めんどくさいからやらないという方が多く、 新しい機能を追加するよりも、今ある不満を解消するほうがユーザは求めています。

きっかけ(Trigger)

きっかけとは、「行動を起こすための仕組み」です。 行動を後押しして、実際に行動してもらえるようにするためのきっかけ。

ここではトリガーと呼び、2つのトリガーを見ていきましょう。

外的トリガー

1. 有償トリガー バナーやCMなど、コストがかかるきっかけ。 短期的に有効だが、既存ユーザのリピートには向かない。

2. 名声トリガー 有名人によるPRなどを使ったきっかけ。 評価の高い記事を書いてもらうなどもいいが、 一時的に知名度を上げても、短期的な成功で終わってしまうことが多い。

3. 口コミトリガー 知人・友人からの口コミによるきっかけ。 人は自分が素敵だと思うことを互いに教え合うことを好むので、 爆発的に普及しやすく、プロダクトの成長を促すこともある。 SNSでの露出や、炎上などもこれに含まれる。

4. 自己トリガー ユーザの生活に埋め込まれたきっかけ。 PUSH通知や、スマホのトップ画面にあるアイコンなどが含まれる。

内的トリガー

ユーザの感情や生活習慣などに埋め込まれたきっかけ。 退屈だからtwitterを見る、写真を取ったからinstagramに上げる、など。 特にネガティブな感情があると強いきっかけを生み出す。

サービス設計の順番

新しいサービス、新機能を設計する際は、

動機がある、実行できる、きっかけが訪れる

という順で考え、施策としては

きっかけを作る、簡単で使いやすくする、モチベーションを育成する

という順で考えると効果が高くなりやすい。

まとめ

この話は主に「行動経済学」から来ていて、 行動経済学はほとんどUXに直結する話が多いのでどんどん知見を共有したいです。 最後にもう一度、

人間は条件を満たさなければ、行動しない

おまけ

• B=MAT はフォグ式消費者行動モデルと呼ばれています
• トリガー(きっかけ)に関しては書籍「ハマるしかけ」により詳しく載っています。