レビュアーに喜んでもらえる「見やすく、わかりやすいスクショ」を作るコツ

## はじめに プルリクエストなどでは自分が作った画面やプログラムの実行結果などのスクショを載せるとレビュアーの負担を減らすことができます。 スクショはないよりもあった方が断然嬉しいですが、ときどき「スクショを貼ってくれたのはいいんだけど、これはちょっと・・・」と思うようなケースもあります。 そこでこの記事ではレビュアーに喜んでもらえるスクショを作成するコツを紹介します。 ## 不要な余白は削る この画像と、  この画像では、  どちらが見やすいでしょうか？ 断然後者ですよね。 スクショを載せるときは不要な余白を削りましょう。 ## 見やすい縦横比にする この画像と、  この画像では、  どちらが見やすいでしょうか？ 断然後者ですよね。 極端に横長だったり縦長だったりするスクショも見にくいので、いい感じの縦横比になるよう、ウインドウの大きさを調整しましょう。 ## 背景色や文字色に配慮する 以下は`ls -a`を実行した結果です。さて、なんて書いてあるでしょうか？  ・・・って、読みにくいわ！！！ 背景色や文字色をよく考えて、読みやすい色遣いを選んでください。  ## テキストで貼り付けることも検討する テストが落ちた！（またはエラーが出た！）というときに、こういうスクショを貼るのと、  こういうテキストを貼るのでは、 ``` 4) Sign in user signs in Failure/Error: a = 1 / 0 ZeroDivisionError: divided by 0 # ./app/controllers/home_controller.rb:6:in `/' # ./app/controllers/home_controller.rb:6:in `index' # ./spec/system/sign_ins_spec.rb:11:in `block (2 levels) in <top (required)>' 5) Sign-ups user successfully signs up Failure/Error: a = 1 / 0 ZeroDivisionError: divided by 0 # ./app/controllers/home_controller.rb:6:in `/' # ./app/controllers/home_controller.rb:6:in `index' # ./spec/system/sign_ups_spec.rb:7:in `block (2 levels) in <top (required)>' Finished in 6.68 seconds (files took 5.52 seconds to load) 70 examples, 5 failures Failed examples: rspec ./spec/controllers/home_controller_spec.rb:11 # HomeController returns a 200 response rspec ./spec/controllers/home_controller_spec.rb:5 # HomeController#index responds successfully rspec ./spec/requests/home_spec.rb:4 # Home page responds successfully rspec ./spec/system/sign_ins_spec.rb:10 # Sign in user signs in rspec ./spec/system/sign_ups_spec.rb:6 # Sign-ups user successfully signs up ``` どちらが読みやすいでしょうか？ いや、これは読みやすさというか、コピペして検索したりするときの利便性の問題かもしれません。 ターミナル上の表示はテキストとしてコピペすることもできます。 画像として載せる方が良いか、テキストとして載せる方が良いか、状況に応じて適切な方法を選択できるようになりましょう。 ## ここを見て！というポイントを強調する たとえば「画面上にいいねボタンを追加しました」というプルリクエストであれば、漠然とスクショを貼り付けるよりも「ここに追加してます！」ということがわかるような強調を入れた方がわかりやすいです。 強調なし  強調あり  ## アニメーションGIFを載せることも検討する 画面の動きを説明したりするときはアニメーションGIFにすると、よりわかりやすくなります。  出典: [Rails 4で作るドラッグアンドドロップで表示順を変更できるサンプルアプリ\(スクリーンキャスト付き\) \- Qiita](https://qiita.com/jnchito/items/391fb16d3f69fda9bdae) なお、上のアニメーションGIFは[Recordit](https://recordit.co/)で作成しました。 ## まとめ というわけでこの記事では、レビュアーに喜んでもらえる「見やすく、わかりやすいスクショ」を作るコツを紹介してみました。 スクショを作成するときにぜひ参考にしてみてください！