日常のあれこれ。

フリーのフロントエンジニア。サーバーサイドも現在勉強中...webデザイン・フロントエンド・イラスト作成・LP用漫画作成を主なシゴトとしています^^日々学んだことをアウトプットしていきます。

UIデザインで気を付けること2

f:id:creat4869:20190902183955p:plain

 

UIデザインで気をつけること1

(https://creat4869.hatenablog.com/entry/2019/09/02/184359)の続きです。

 

進行状況を示すインジケータを常に表示する

ステップ形式でユーザーに入力してもらうたい画面には、ユーザーが作業にかかる時間を把握できるようにインジケータを表示させるようにしましょう。

 

可能であれば、作業にかかる時間を均一にしてユーザーが処理の所用時間を見積もれるようにしてあげるとよりいいです。

 

ウェブ上で動画などを提供する場合は7分以内収める

人の注意力は長くても7~10分しか持たないそうです。

なので、長く見てもらう必要があるものは、7分ずつ一旦区切って動画などを提供してあげるのがいいです。

 

物語を活用する

物語は人が情報を処理するのに適した自然な形式です。

物語を使うことでわかりやすく、興味深く、記憶しやすいものなります。

 

そして、物語の方が人に訴えかけてくる力が強いので、

人に何か行動を起こさせたければ、物語を活用しましょう。

 

7つの基本的感情の画像を使用する

喜び、悲しみ、軽蔑、恐れ、嫌悪、驚き、怒りの7つの基本的な感情は万国共通なのだそうです。

なので、7つの基本的感情の画像を使用すれば、世界中のすべての人に誤解を生むことなく、明確に情報を伝えられることができます。

 

エラーメッセージは以下のように明確に

エラーメッセージを表示させるときは、以下の項目を入れるとユーザーに親切です。

 

・ユーザーが何をしたのかを告げる

・発生した問題を説明する

・修正方法を指示する

・受動態ではなく能動態を使い、簡単な言葉で書く

・例を示す

 

推薦文や評価、レビューを活用する

ユーザーの行動に影響を与えたい時は、他人の評価を活用するのが効果的です。

 

 

UIデザインで気を付けることは他にもたくさんありますが、

今回は分かりやすいものをいくつか挙げていきました。

 

また時間がある時に、他のものも上げたいと思います^^

UIデザインで気を付けること

f:id:creat4869:20190902183955p:plain

 

最近UIについて学ぶことが多かったので、

備忘録として書いていこうかなと思います^^

 

UIとは?

そもそもUIとはなんぞや?

と知らない方もいるかと思います。

 

UIとは『ユーザーインターフェース』頭文字をとった言葉です。

ユーザーインターフェースとは、デバイスとそれを使用する人間(ユーザー)を結びつける役割のことです。

操作手順が複雑だったりすると、“UIが使いづらい”などと表現します。

 

UIデザインを考える上でのポイント

最近学んだ、UIデザインを考える上でのポイントを上げていきたいと思います。

 

サイト画面の中央ではなく、周辺に配置するものでそのページやサイト自体の狙いを明確に伝えられるようにする

これはなぜかというと、人は中心視野と周辺視野という二つの視野を使っています。

基本は中心視野で注目してページを見ていますが、

その間もずっと周辺視野は無意識に使われていて、ページの概要をつかもうとしているのだそうです。

 

なので、注目して見てもらいたい所だけではなく、

ページの周り部分もしっかり考えることが大切になってきます。

 

ページの特定部分に注目してもらいたい場合、その周りに点滅するものや動画を置かない

人は点滅するものや動くものに引かれます。

なので、注目してもらいたい部分の周りには点滅する広告や動画などは置かないようにするべきです。

 

ページにある画像の人物の目線をユーザーは見る

サイトページの中で、人物画像を使用することってよくあると思います。

これを有効的に使用する方法として、

見てもらいたいもの(例えばボタン)があった時に、そのもの(ボタン)に目線を送っている人物画像を近くに置くとよいという手法があります。

人は、人物の目線をたどってその目線の先を見る習性があります。

 

なので、絶対見てもらいたいものがあったときは、

見過ごされないように人物画像を使用するものいいかと思います。

 

一番重要な情報は画面の3分の1までの場所か画面中央に置く

人は端を見ない傾向にあります。

ですので、できるだけ重要な情報は中央に置くようにしましょう。

 

画面内で『青と赤』、『緑と赤』を近くに配置しない

この2つの配色組み合わせは、とても刺激が強く返って見づらくなります。

できるだけ使くに配置しないよう。

 

分類する時は、できれば色ではなく線の太さで違いを表現する

これは、色覚異常の方への配慮となります。

色でものを分類していると、色覚異常の方にはほとんど同じ色に見えている可能性があります。

それでは分類した意味がありませんので、できれば色の前に線の太さなどで違いを表現してみるようにしましょう。

 

どうしても色で分類したい場合は、色覚異常に対応できる色の組み合わせを用いてみるのがいいかと思います。

 

フォントは読みやすいものにする

これは当たり前のことではあるのですが、読みにくいと正確に読んでもらえないだけでなく、もう一つデメリットがあるのです。

 

フォントが読みにくいと、人はそのうまくいかない感覚を文章の意味の方に転嫁してしまい、文章の内容自体が理解しにくいもの、実行しにくいものと捉えてしまう可能性があるのです。

実際はそんなことはないのですが、読みにくいというだけでそう感じてしまうのです。

ですので、フォントは読みやすいものを使用しましょう。

 

エックスハイトの大きなフォントを使用する

エックスハイトとは、小文字『x』の高さのことです。

このエックスハイトが大きいフォントは読みやすいので、細かいですがここも注意しましょう。

 

カテゴリなど項目に分ける時はできるだけ4つまでにする 

人が覚えられる数は4つまでという研究結果があります。

分ける場合は、できるだけ4つまでにしましょう。

 

現在位置がすぐにわかる仕組みを用意する

人は急に目の前のことから注意が離れて、別のまったく関係のないことに注意を向けることが多々あります。

また目の前に注意が戻った時に、今自分がどのページにいるのかわからなくなってしまうと、ユーザーは次のページへ移動できなくなり、無駄に手を動かしたり頭を使わなければならなくなってしまいます。

これはUIを低下させる原因となります。

できるだけ画面を見たらすぐに現在地が分かるようにしましょう。

 

 

続きは次の記事で。

 

Railsで削除してしまったファイルを復元する方法

f:id:creat4869:20190828161333p:plain

すでにプッシュしてしまっていたファイル、私の場合はsecrets.ymlファイルだったのですが、
それをgitignoreしたくていろいろしていたら、
ローカル上でもリモート上でもファイル自体がなくなってしまって、
エラーが出てしまいパニックになったので、その時の対処法を記しておきます^^

ファイルの復元方法

手順を説明していきます。
復元の手順は簡単なのですぐにできると思います。

削除してしまったファイルの検索をする

以下をターミナルで打つ。

$ git log --diff-filter=D --summary


すると削除した履歴とコミット番号が出てくると思います。
復元したいファイル名の上の方にcommitという記述があると思うので、
その横にあるコミット番号をコピーしておきます。

ファイルを復元する

以下をターミナルで打つとファイルの復元が可能です!

$ git checkout コミットの番号^ -- ディレクトリ名/ファイル名


今回私の場合だと、secrets.ymlを復元したかったので、以下のように打ちました。

$ git checkout 57dd2c7375fa1db1501e648a6ed1dff6f68410f8^ -- config/secrets.yml


これでローカル上に、削除してしまったsecrets.ymlファイルが復元されました^^

jQueryRipplesの使い方

f:id:creat4869:20190821164739p:plain

jQueryで作れるアニメーションについて調べている時、面白いものを見つけました!
それがRipplesというjQueryです!

これは『水面に波紋が広がるような表現』を可能にしてくれるjQueryです!
設定している範囲内でクリックをすると水に指をつけた時のような波紋が表現されるのです。

導入は簡単なので、さっそくやり方を説明していきます^^

HTML

<body>
  <div class="container">
    <!--入れたいコンテンツ(画像など)-->
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/jquery.ripples-min.js"></script>
</body>

jquery.ripples-min.jsというファイルを公式サイトなどからダウンロードし、自分のサイト内に配置しておきましょう。
ここでは、.containerというクラス名の範囲に波紋が適応されるようになります。

CSS

.container{
  height:100vh; // ここは自分が入れたいコンテンツのCSSを書く
}

jQuey

$(document).ready(function(){
  $('.container').ripples({
    resolution: 400
  });
});

これでクリックすると波紋が表示されるようになります!
resolutionの数字を変えて波紋の大きさを変更したりと、オプションもいろいろあるようなので、設定してみるのもいいかもしれません^^

スクロールすると狭くなる固定ヘッダーの作成方法

f:id:creat4869:20190819021942p:plain

ヘッダーを上部に固定させるCSSは簡単でよくするのですが、
時々見る『スクロールしたら高さの幅が自動的に狭くなる固定ヘッダー』を作りたくて、
実際にしてみました。

思っているよりも簡単にできました^^
手順を説明していきます。

HTML

<header id="top-header">
<!--headerに入れたいコンテンツ-->
</header>

jQuery

$(function(){
  var $header = $("top-header");
  $(window).scroll(function(){
    if($(window).scrollTop()>50){
      $header.addClass('fixed');
    }else{
      $header.removeClass('fixed');
    }
  });
});


ここでスクロールしたらfixedというclass名が付与され、一番までスクロールで戻したらfixedというclass名が削除されるようにしています。

CSS

#top-header{
  position: fixed;
  width: 100%;
  height: 60px;
  transition: all 0.3s ease;
}

#top-header.fixed{
  height: 40px;
}


もともとのヘッダーの高さを60pxに指定し、スクロール後は40pxの高さになるようにしています。

高さの指定だけだとスクロールをした時に、すぐに60pxから40pxに変わってしまい見栄えがよくありませんので少しアニメーションを加えました。
それがtransitionという記述です。
これでスクロールした時に、ゆっくりヘッダーが伸び縮みするようになります。

必要なのは、もとの高さと縮んだ後の高さを記述してあげること。
そしてtransitionでアニメーションを付けることです!

これで下にスクロールした時にはヘッダーが縮み、下から一番上へスクロールした時はヘッダーの高さが広くなります。

Railsアプリでmetaタグ&OGP設定をする方法

f:id:creat4869:20190815170003p:plain

Railsアプリを作成した時、

SEO対策しないとな~』
『OGP設定してないからSNSに記事をあげた時、アイキャッチが表示されないじゃん!やらないと!』

となったので、その時に行った手順を残していこうと思います。

SEO対策って?

SEOというのは、『検索エンジン最適化』のことをいいます。
簡単に説明すると、自分のサイトをネットで検索した時の結果順位を上位にする対策のことです。

ユーザーはネットで検索した時、上位にあるサイトから開いていきますよね?
なので、よりたくさんの人に自分のサイトを周知してもらうためには、
SEO対策をしてサイトの順位を上げることが重要になってくるわけです。

できるだけ順位を上げるために必要な設定としてページのmetaタグ設定が必要になります。

OGP設定って?

OGPを簡単に説明すると、
SNSなどで自分のサイトの記事をシェアする時に、
そのページのタイトルやアイキャッチなどの情報を正しく伝えるためのHTML要素のことです。

最近、SNSで記事をシェアしようとする時、
勝手にURLではなく、アイキャッチが表示されたりしますよね?
あれはシェアしようとしている記事にちゃんとOGP設定がされているから表示されるのです。

逆にOGP設定がされていない記事をシェアしようとすると、
画像やタイトルは表示されません。

たとえばtwitterでだれかのつぶやきを見た時、
『URLしか載っていないつぶやき』と『アイキャッチとタイトルが表示されているつぶやき』だと
どちらのURLを開きたいと思いますか??

やはりタイトルなどが載っているほうが、
どのような記事か分かりやすいですし開きたくなるものです。

このようにSNS等で自分の作成したサイトを拡散したいと思っている方は、
OGP設定がとても重要になってきます。

SEO対策とOGPの重要性を知ったところで、
さっそく設定の方法を説明していこうと思ます^^

metaタグ設定手順

SEO対策とOGP設定をどうようにするかというと、
簡単にいうとmetaタグを使用します。
headの中に記述する要素ですね。

どこかのページを適当に開いて、
右クリックで『ページのソースを表示』をしてみてください。
head内にmetaという要素がたくさんあります。

この全てがSEO対策に必要、OGP設定に必要なわけではありませんが、

<meta name="description"~
<meta property="og:title"~


といった記述はこの二つに該当する要素です。
上がSEO対策のコードで、下がOGP設定のコードです。
このように、設定するにはいくつかコードを記述する必要があります。

では今回はRailsアプリ内で、設定する手順を書いていきます。

Gemfile記述

gem 'meta-tags'


上記を記述したら、bundle installします。

app/helpers/application-helper.rb内記述

application-helper.rbファイル内に以下を記述します。

module ApplicationHelper
  def default_meta_tags
    {
      site: 'サイト名',
      title: 'タイトル',
      reverse: true,
      separator: '|',
      description: 'ディスクリプション',
      keywords: 'キーワード',
      canonical: request.original_url,
      noindex: ! Rails.env.production?,
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'サイト名',
        title: 'タイトル',
        description: 'ディスクリプション', 
        type: 'website',
        url: request.original_url,
        image: image_url('ogp.png'),
        locale: 'ja_JP',
      },
      twitter: {
        card: 'summary_large_image',
        site: '@ツイッターのアカウント名',
      }
      fb: {
        app_id: '自身のfacebookのapplication ID'
      }
    }
  end
end


上記で日本語で書かれているところは、ご自身のサイト等の情報をいれてください。
favicon.icoやicon.jpg、ogp.pngといった画像の記述があるかと思いますが、
こちらはご自身で作成した画像の名前を入れてください。
画像の置き場所は、通常通りのapp/assets/images内に入れるとOK。

サイズとしては、

  • ファビコン→32×32px
  • apple用アイコン→180×180px
  • OGP画像→1200×630px

が標準です。

metaタグ出力

metaタグを出力するために、
app/views/layouts/application.html.erbのhead内に以下の記述を追加します。

<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>


こちらはさきほど、app/helpers/application-helper.rb内に記述した
デフォルトのmetaタグが表示されるようにするためのコードです。
ページごとにタイトルやアイキャッチなどの情報は違うと思うので、
metaタグはページにより変わります。

しかしページごとに設定していなくても、
設定していないページではこのデフォルトのmetaタグ情報が勝手にこれで表示されるようになります。


では、個別にページのmetaタグを設定したい場合はどうするのか。
そちらを今から説明します。

ページごとに違うmetaタグを設定する方法

さきほどのデフォルトの表示をするためのコードは記述したままにしておき、
違うmetaタグを入れたいページのhtml.erbファイルの一番最初に以下のように記述を入れます。

<% set_meta_tags title: 'タイトル', description: 'ディスクリプション' %>


こちらはheadの中に記述しなくても大丈夫です。
そもそもapp/views/layouts/application.html.erbファイル内で
共通のheadを使用している場合が多いと思います。
なので個別のページの場合は、headのコードがファイル内に存在しないと思いますので、
ファイルの一番最初に記述します。

今回は例として、タイトルとディスクリプションだけ変更しましたが、アイキャッチやキーワードなど変更したいものを同様に記述すれば
そこだけ変更されます。
上書きされるということですね。


確認したい場合は、ネットでページを開き、
右クリックで『ページのソースを表示』をクリックして確認します。
設定したmetaタグがたくさん増えていると思います。

これでmetaタグでのSEO対策とOGP設定はできました^^

herokuのデプロイ時に詰まった時の対処法

f:id:creat4869:20190811165217p:plain

herokuへのデプロイをするため、git push heroku masterをした時に
なんとなく分かってはいましたが、やはりつまりました笑

 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to・・・以下略


こんな感じでデプロイが最後につまりました…
しかしデプロイがつまった理由を調べましたが、結局理由は分からずでとても困りました。

なにかバージョンが違っているということだけはエラーを読んで分かり、
それだけで調べたところ以下をターミナルで打つとデプロイのつまりが解決しました!

$ heroku buildpacks:set https://github.com/bundler/heroku-buildpack-bundler2


これだけ打って、もう一度git push heroku masterをするとつまりなく進むと思います^^


参考にしたサイトはこちらです↓
https://qiita.com/ho_soft/items/90733a77c04539504206