アニメーションのきれいなWebサイト10選

f:id:BOEL:20171227110116j:plain

こんにちは。デザイナーの寺田です。
Webサイトにおいて、アニメーションの効果はサイトのイメージ向上や平面では表現できない印象をユーザーに届けます。
Webサイトの制作において、エンジニアとデザイナーの意識の合わせ方や調整の仕方など工夫が必要かと思います。 あらかじめこういうサイトを目指しているなどアニメーションの共有ができていれば…と感じることがしばしばあります。
今回は、Webサイト制作の参考としてアニメーションがきれいなWebサイトを10個選びました。 デザインの参考にも、アニメーションの参考にもなったら幸いです。

 

多方面の動き

f:id:BOEL:20171227110428p:plain

https://www.serpentiform.bulgari.com/ja/home/

動きがリッチなのにも関わらず、Webサイトが重いと感じないサイト。
動作が重たくないのではなく、アニメーションにより軽快な動作をしているように感じるのかもしれないです。
スペシャルサイト制作時に参考にしたいと思いました。

 

ページ遷移

f:id:BOEL:20171227110540p:plain

https://monopo.co.jp/

メインビジュアルには動画を使用しています。
ページ遷移の際に出てくるローディングの動きは、複数の動きを合わせており待たされている印象を与えないです。
アニメーションの使い所を参考にしたいサイトで

 

マスク

f:id:BOEL:20171227110635p:plain

https://www.apple.com/jp/iphone-x/

メインビジュアルのXのマスクの後ろが動いており、Xが象徴的に見えます。
動画ではありますがスマホでもPCと同じようにアニメーションがサクサク動くappleのサイトは、ユーザーに先進的な印象を与えます。
サクサクとした動きはWeb制作の際に参考にしたいです。

 

ローディング

f:id:BOEL:20171227110722p:plain

https://www.hollandgreen.co.uk/news/class-q-permitted-development-rights /

ローディングの動きが綺麗。
左上、右下、中央、1.2.3のリズムのアニメーションは、動きが軽快で軽やかな印象です。
また、スクロールの動きに制御をかけているのか、通常よりも滑らかな滑り心地を体感できます。
動きの滑らかさに注目したいサイトです。

 

先進的な印象

f:id:BOEL:20171227110812p:plain

https://supercrowds.co/what

一つ一つに動きを加えており、画面にリズムがあるサイトです。
画像の表示にも複数の動きを使っており、先進的な技術を使って制作に挑んでいるように感じます。
1つの動きに注目してしまいますが、細かい複数の動きがサイトをリッチにしている印象です。
複数の動きを合わせることは、サイト制作に取り入れたいです。

 

スクロール制御

f:id:BOEL:20171227110903p:plain

https://201d.jp/

メインビジュアルで、マウスカーソルに合わせて背景のマスクが動く仕様。
スクロールの動きの制御もこのサイトの雰囲気にあっており、サイトのイメージを色濃くしている印象です。
スクロールの動きでサイトの雰囲気が変わることが分かると思うので、ぜひ確認してもらいたいサイトです。

 

3Dのモチーフ

f:id:BOEL:20171227110952p:plain

https://clarity.io/

3Dの地球がスクロールに合わせて動くサイト。
マウスをクリックした状態で動かすと地球もグリグリと動かすことができます。
色味といい、グローバルな印象です。

 

SVGアニメーション

f:id:BOEL:20171227111043p:plain

http://www.jal.com/ja/outline/brand/baton/

スクロールに合わせたSVGアニメーションがWebの縦長のページをうまく利用している印象です。
視覚的に説明をしており、見ていて楽しいサイトです。
長くなってしまう説明をビジュアルとアニメーションを用いて上手く表現しています。

 

3Dを使用した現代的なサイト

f:id:BOEL:20171227111144p:plain

http://festival.lattexplus.com/

3Dを使った、現代的なサイトです。
ゲームのような、今まで紹介したサイトにはない臨場感を味わえます。

 

マウスカーソル

f:id:BOEL:20171227111243p:plain

https://delaunay.jp/

マウスの動きに合わせてメインビジュアルが動くサイト。
スクロールした時のメインビジュアルの動きも綺麗です。静かな印象ですがきれいな音をビジュアルから感じることができる軽やかなアニメーションが、サイトの雰囲気を向上させています。

 

最後に

いかがでしたでしょうか。
Webサイトにおいてアニメーションの有無はユーザーに与える印象が変わることがわかったと思います。
ぜひ実装の工夫をして行きたいですね。
Web制作において、アニメーションの実装でエンジニアとデザイナーのコミュニケーションの取り方はさまざまだと思います。 デザイナーはできるだけイメージを伝えてあげることが大切ですが、エンジニアもデザインから見た印象でアニメーションの実装を遊んで見てもいいかも知れないですね。 今回の記事がWeb制作の参考になれば幸いです。

年賀状作成時のマナーとデザイン

f:id:BOEL:20171211143241j:plain

こんにちは。デザイナーの那須です。
12月になり、年の瀬が近づいてきました。

みなさんは、もう年賀状の準備を始めていますか?
新年にポストに年賀状が届き、相手が自分のことを考えて送ってくれたのだと思うと、嬉しいものです。

しかし、いざ送るとなると、意外と知らないのが年賀状のマナー。
この書き方でいいのかな?この絵柄で失礼ではないかな?と心配な方のために、基本的な年賀状のマナーとデザイン例をまとめました。

 

年賀状の基本

◯正月とは

まず、お正月は「歳神様(年の神様)」をお迎えするならわしです。1日を元日、3日までを「三が日」、7日までを「松の内」とよびます。

 

◯年賀状を送る人

前の年に年賀状をいただいた方、今年お世話になった方に出します。

 

◯投函の時期

1月3日までに届くように出します。その年いただいた年賀状への返事は、松の内までに届くようにしましょう。時期を逃すのは失礼です。
到着が松の内を過ぎるときは、年賀状ではなく寒中見舞いを出します。
また、一般はがきや私製はがきを使うときは、「年賀」の朱書きを入れましょう。それがないと、一般郵便物として年内に届いてしまいます。

 

◯喪中のときは欠礼状を

喪中で年賀状を辞退するときは、欠礼状を出します。相手が年賀状の準備を始める前に届くように出しましょう。

 

◯誤字に注意

全て書き終えたら、誤字・脱字がないかよく確認しましょう。

 

年賀状に書くこと

◯賀詞

「謹賀新年」などの賀詞は必ず書きます。
目上の人へ出す際は、2文字の賀詞は避けましょう。「賀正」「迎春」などの2文字の賀詞は、「謹んで」「恭しく」といった意味が含まれず丁重さに欠けてしまいます。
また、賀詞の意味の重複に注意しましょう。
「賀正」「Happy New Year」などの賀詞を書いているのに、本文に「あけましておめでとうございます」と書くと意味が重複します。
「新年あけましておめでとうございます」もよく見る表現ですが、「新年」と「あけまして」の意味が重なっています。「新年おめでとうございます」もしくは「あけましておめでとうございます」と書きます。
また、よく見る「A Happy New Year」は、冒頭のAは不要です。クリスマスカードなどによく書かれる定番表現「Merry Christmas and a happy new year」ではaをつけます。

 

◯昨年お世話になったことへのお礼や近況

お世話になったことへの感謝の気持ちや近況を書きます。文章は簡潔にし、暗い話題は避けます。
また、相手の健康や幸せを願う言葉を添え、相手を気にかけていることを示しましょう。
手書きしない場合も、自筆でひとこと書き添えると印象が良くなります。

 

表記のマナー

◯忌み言葉を使わない

忌み言葉とは、縁起が悪いため使ってはいけない言葉のこと。相手の不幸を連想させるような表現は避けます。
「去年」の「去」は、「去る」という意味が新年にふさわしくありません。「昨年」「旧年」と書きます。ほかにも、「切れる」「落ちる」「終わる」「離れる」なども避けるようにします。

 

◯「お喜び」と「お慶び」の書き分け方

「喜」は、感情的に嬉しいときに使います。自分のことを述べるときにも使えます。
「慶」は、おめでたいことを祝うとき、新年や結婚など相手の慶事を祝福するときに用います。自分のことを述べる際には使えません。
従って、新年の挨拶ではどちらも間違いではありません。

 

◯元日の表記について

「元旦」は「1月1日の朝」なので、「1月元旦」と表記するのは誤りです。「2018年元旦」「平成30年元旦」と書きます。

 

◯句読点は付けない

「、」「。」などの句読点は年賀状にはいれないのが正式です。改行する、スペースを空けるなど書き方を工夫し、読みやすい表記を心がけましょう。

 

失礼のない宛名の書き方

◯個人に送る場合

「様」を使うのが一般的。誰にでも使えます。
 例)鈴木 一郎様

 

夫婦や家族連名の場合は、それぞれに「様」をつけます。
 例)鈴木 一郎様
      花子様 

 

◯取引先や会社に送る場合

会社に送る場合は「御中」を使います。株式会社や有限会社は略さず記入しましょう。
 例)○○○○株式会社 御中

 

部署を入れる場合は、部署に「御中」をつけます。
 例)○○○○株式会社 営業部御中

 

特定の人に送る場合は会社名には御中をつけず、人名に「様」をつけます。
 例)○○○○株式会社 鈴木 一郎様

 

役職を書く場合は、名前の上に、名前より小さく書きます。役職自体が敬称なので「課長様」のように「様」をつけるのは誤りです。
 例)社長 鈴木 一郎様

 

年賀状のデザイン例

◯縁起の良いモチーフを使う

・松竹梅
松は一年を通じて常緑を保ち、竹はまっすぐに伸び、梅は厳しい寒さの中で花を咲かせることから、古くから縁起が良いモチーフとして用いられます。

 

・扇
末広がりの形状の扇は未来への展望が広がるという発展、繁栄の意味のある吉祥文様です。

 

◯干支の文字を主役にする

文字をそのままモチーフのように使ったり、イラストと組み合わせて干支を表現することもできます。
例)

f:id:BOEL:20171211141912p:plain

参考サイト

http://www.individuallocker.com/postcard/happy-new-year-2018-no15

 

f:id:BOEL:20171211142035p:plain

参考サイト

http://www.individuallocker.com/postcard/happy-new-year-2018-no15

 

◯色数を抑える、トーンを揃える

使う色を3色程度にすると、すっきりまとまります。たくさん色を使いたいときは、トーンを揃えましょう。
和風のデザインにするときは、日本の伝統色がよく馴染みます。
こちらのサイトでは、伝統色をカラーコードや配色パターンとともに見ることができます。
「和色大辞典」

https://www.colordic.org/w/

 

日本の伝統色については、こちらでも紹介しています。
「TIPS vol.21 DESIGN日本古来より伝わる色。美しい伝統色の魅力」

https://boel.jp/tips/vol21_traditional_color.html

 

◯紙を変える

紙を変えると、見た目や手触りでインパクトを与えられます。おすすめの紙をこちらで紹介しています。
「TIPS vol.35 DESIGN2016年の年賀状に使いたい紙、10選」

https://boel.jp/tips/vol35_nenga_paper.html

 

◯まとめ

細々と書きましたが、あまりストイックになりすぎず、自分らしい年賀状を作ってみてください。
投函は、12月25日までに。

※6月に、はがきが52円から62円に値上げされましたが、12月15日~翌年1月7日に出された年賀はがきは52円で送ることができます(期間中、私製はがきも表面に見やすく「年賀」と朱記すれば52円で郵送可)。
この期間より早くても遅くても、一般郵便物(62円)となりますのでご注意を。

 

・参考文献
『作法が身につく しきたりがわかる 冠婚葬祭マナーの便利帖』2014年、高橋書店
「デザインノート 2016 No.67」
・参考サイト
富士フイルムの年賀状 2018年

http://www.postcard.jp/nenga/column/02nenga-manner.html

http://www.postcard.jp/nenga/column/05nenga-gashi.html

http://www.postcard.jp/nenga/column/04nenga-atena.html
日本郵便

https://www.post.japanpost.jp/question/140.html

https://www.post.japanpost.jp/question/212.html

https://www.post.japanpost.jp/question/211.html
東京国立博物館

http://www.tnm.jp/modules/r_exhibition/index.php?controller=item&id=3877
年賀状・喪中・挨拶状のCardbox STAFF BLOG

http://www.cardbox.jp/cblog/2017/07/kisshomonyo.php

外国人にもわかりやすいWebサイトデザイン

f:id:BOEL:20171117124847j:plain


こんにちは、デザイナーの野中です。
秋もすっかり深まり、紅葉シーズンで観光には絶好の時期ですね。
みなさんも街中で外国人観光客の姿を見かける機会が多いのではないでしょうか。

日本政府観光局(JNTO)によると、2017年8月の訪日外国人数247万8千人に登り、2016年の同月に比べて20.9%増加しています。
日本から海外に訪れるアウトバウンドの数を、海外から日本へ訪れるインバウンドの数が上回ったのは2015年。それ以来、訪日外国人の数は増加し続けています。
2020年の東京オリンピック開催に向けて、今後もますます外国人観光客の増加が予想されています。

 

JNTO 訪日外客統計の集計・発表
https://www.jnto.go.jp/jpn/statistics/data_info_listing/index.html

 

そうした訪日外国人観光客は、どこから情報を得ているのでしょうか。
観光庁が発表している「訪日外国人の消費動向 平成28年10-12月期報告書」よると、知人からの口コミやガイドブック以外だと、個人ブログや旅行会社のホームページなど情報の多くがweb上で収集されていることがわかります。

 

観光庁 訪日外国人消費動向調査
http://www.mlit.go.jp/kankocho/siryou/toukei/syouhityousa.html

 

また、日本に居住している外国人も年々増加しています。そうした生活者にとってもわかりやすいサイトづくりがますます求められています。

そこで今回は、外国人を対象にしたWebサイトやコンテンツを制作する時に注意したい項目を6つ取り上げます。

 

色彩感覚

特定の色に対するイメージは、文化によって異なります。
みなさんは「オレンジ」の色からどんなイメージを連想しますか。明るい、元気、活発な印象を持つ人が多いのではないでしょうか。
しかし、メキシコでは「オレンジ」はお葬式を連想させる色です。メキシコの有名な死者の日と呼ばれる期間には、祭壇にオレンジ色のマリーゴールドの花がたくさん掲げられています。
日本ではお葬式と言えば黒のイメージですから、メキシコとはだいぶ異なった色のイメージを持っていると言えます。
外国人向けコンテンツを制作する際にはこのような色彩感覚の違いを考慮して、使用する色が適切な印象を与えられるか検討する必要があります。

 

記号が与えるイメージ

同じ記号から連想するイメージには、文化によって違いが生じることがあります。
例えば、「観光案内所」を示すピクトグラムとしてガイドマップに「?」のマークが置かれているのをよく目にすることがあります。
「?」のマークはJIS規格で観光案内所のピクトグラムとして採用されており、日本人にはなじみのあるマークです。しかし、外国人によってはこれが宝の地図のお宝マークのように感じられ、観光案内所だと分からなかった、という声もあります。

アイコンやピクトグラムを使用する際には、文化的背景が違う人であっても理解できるか配慮する必要があります。
意味の取り違いを未然に防ぐため、誤解が生じる可能性があるピクトグラムは使用しない方が良いでしょう。

 

セリフ体とサンセリフ体のイメージの違い

日本語でゴシック体と明朝体から感じる文字の印象が異なるように、欧文フォントのセリフ体とサンセリフ体では与える印象が異なります。
みなさんも、セリフ体は伝統的でクラシカルなイメージ、サンセリフ体はシンプルで現代的なイメージ、と感じるのではないでしょうか。しかし、それぞれのフォントがどういった印象を与えるかまでは、日本語をメインの言語として生活している日本人にとっては掴みづらいものです。
使用するフォントがデザインイメージに最適かどうか検討する際には、フォントが実際に使用されているシーンの検証や、欧文フォントに見慣れた外国人に意見を求めたりすることが必要となります。

 

アルファベットの大文字表記

アルファベットは、大文字と小文字で与える印象が変わります。
タイトルや見出しで英文を使用する際、大文字のみで文を表記する場合がありますが、大文字のみの表記には注意が必要です。
一般に、大文字表記が用いられるのは以下のような場合です。
・タイトル
・注意書き
・文章中で特定の箇所のみ強調したい時
・人名、地名など固有名詞
上記以外の箇所で不必要に大文字を使用すると、「叫んでいるような感じ」や、「主張・誇張が過ぎる」といった印象を持たれてしまうことがあります。
また、大文字だけの長い文章は読みにくいため可読性も低くなります。目立たせたい箇所のみに適切に使用する必要があります。

 

翻訳できるサイトづくり

メインビジュアルや見出しの文字を画像として切り出すと、テキストとして認識されないため自動で翻訳することができません。
外国語のサイトを訪れた時、日本語のページがなかったらページ自体を翻訳にかけて読む、という人は多いのではないでしょうか。
しっかりと多言語対応したページがあればいうことはないのですが、様々な言語への対応や、クオリティの高い外国語ページの作成・維持は困難です。
そんな時はむやみに外国語ページを設けるより、翻訳されやすいページ作りを心がけると良いかもしれません。
例えばタイトルや見出しは画像で作成せず、コードでテキストを反映した方が翻訳にかけることができ理解が深まります。 また、一つ一つの文を短く簡潔にすることで自動翻訳の精度も上がります。

 

やさしい日本語


日本語のWebサイトを閲覧する外国人には、観光客だけでなく日本で生活している生活者も含まれます。
生活者向けの災害情報や日本で生活する上で必要な情報の表記には、「やさしい日本語」が用いられています。
「やさしい日本語」とは、日本語能力検定のN4,N5レベル(初級レベル)に相当する文法・表現を用いて簡潔に表記する方法です。多くの市町村のサイトでは、「やさしい日本語」表記への切り替え機能や、「やさしい日本語」で書かれたページが備わっています。

訪日観光客を対象にした観光サイト「MATCHA」では、使用言語に「やさしい日本語」を選ぶことができます。簡単な単語が使われているのはもちろん、文を理解しやすいよう文節で区切ったり、漢字にはルビが振られています。

 

MATCHA
https://matcha-jp.com/easy


英語は世界中の国際交流の場で使用されていますが、必ずしも全ての人が理解できるわけではありません。
日本に在住している生活者の方向けのサイトを制作する際には、むしろ生活者が一般的に理解できる範囲の「やさしい日本語」を用いた方が理解しやすいサイトになるかもしれません。英語は世界中の国際交流の場で使用されていますが、必ずしも全ての人が理解できるわけではありません。
日本に在住している生活者の方向けのサイトを制作する際には、むしろ生活者が一般的に理解できる範囲の「やさしい日本語」を用いた方が理解しやすいサイトになるかもしれません。

 

まとめ

いかがでしたでしょうか。 外国人と一言でいっても、持っている文化的背景や感じる印象はひとそれぞれです。
全てのユーザーにとってフレンドリーなサイト制作は困難ですが、具体的に誰に向けて情報を発信したいのか、まずターゲットを明確にする必要があります。
その上で、誤解のないようアイコンやピクトグラムの形状を検討したり、英語や中国語などのに対応していないターゲットでもわかりやすい「やさしい日本語」を取り入れたりすると、より新設なサイトになるのではないでしょうか。
ますます増えていく訪日外国人観光客や日本在住の外国人のみなさんにとって、必要な情報が正確に伝わるサイト作りを心がけたいですね。

 

 

 

 

クリスマスに取り入れたいデザインのポイント

f:id:BOEL:20171109115003j:plain

 

こんにちは。デザイナーの箱石です。
ハロウィンが終わり、街はクリスマスの色合いになってきました。 今回は、これから増えてくる「クリスマスのデザイン」の要素を、実例と共にご紹介します。

※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイトも含まれており、一定の期間を過ぎるとクローズする可能性がありますので、ご了承ください。


フォント

クリスマス向けのデザインでは、高級感やラグジュアリーさの演出のため、ゴシックではなく明朝体のフォントを用いることが多いです。
ビアードパパ明朝体のフォントを使い、クリスマスケーキの特別感を見せています。

一方、スターバックスのサイトではゴシック体のフォントに枠を付けることで手書き感を演出しています。また毎年クリスマスになると限定商品が出てweb もクリスマス仕様になります。
スターバックスの広告では手書き感を演出したフォントがよく用いられるため、他の広告に合わせてゴシック体を使うことで、ブランドとしての統一感を出しています。

 

ビアードパパの作りたて工房 Christmas cake2017

http://www.muginoho.com/xmas/

f:id:BOEL:20171109115046j:plain

 

スターバックス クリスマスサイト2017 Christmas cake2017

http://www.starbucks.co.jp/cafe/raspberry/index.html?nid=tbn_01_pc

 

配色

クリスマスといったら「赤と緑」をイメージしますが、毎年開催される、横浜赤レンガ倉庫のクリスマスマーケットサイトは赤を使わず、夜空の青をメインにして背景には星をイメージする黄色を使い、高級感を出しています。色を多く使わずまとめているため落ち着いた印象です。

 

横浜赤レンガ倉庫 クリスマスマーケット

https://www.yokohama-akarenga.jp/christmas2017/

f:id:BOEL:20171109115329j:plain


モチーフ

クリスマスのモチーフには、プレゼント・木・靴下・サンタクロース・星などが多いです。例えば「夜空・星・街」や「木・靴下・プレゼント」などを組み合わせてみると、よりクリスマスのイメージがしやすいですね。
またパーティ料理にもこのモチーフを入れることができます。例えばパスタの盛付けをツリーに見立ててみるとテーブルがより可愛くなります。

 

f:id:BOEL:20171109115436j:plain

 

素材

クリスマスの素材として多く使われているのが、イルミネーションや星空をイメージする「スパンコール」や「ラメ」といったキラキラしたもの。また雪をイメージする「綿」があります。
このような素材を使ったクリスカードはよく店頭で見かけますが、Webサイトデザインにもこうした素材感が用いることができます。
目黒川のイルミネーションを案内するweb サイトでは、夜をイメージする背景に星の光を散らすことで、幻想的なイルミネーションをイメージするデザインになっています。コピーの文字がバラバラと現れるアニメーションも、キラキラした光のイメージに合っています。
アフタヌーンティーリビングは雪の降る web サイトを公開しています。しばらくすると空にサンタクロースが現れるアニメーションも、クリスマスらしい遊び心があります。イラストを使っているため優しく親しみのあるデザインですね。

 

目黒川のイルミネーション案内

http://jewel-dome.com

f:id:BOEL:20171109115548j:plain

 

アフタヌーンティーリビング クリスマスサイト

https://www.afternoon-tea.net/merry-apple-christmas-2017/

 

パッケージ

この時期になると各ショップでクリスマス限定のパッケージやショップバッグが出ます。パッケージにも先ほど紹介したモチーフが使われるなど、それぞれのブランドに合わせたデザインを展開しています。
洋菓子店「AUDREY」はクリスマスの派手な印象とは違い、グレーをベースにしたシンプルなパッケージデザインです。
また D-BROS のラッピングシールは、赤と黒の素朴なイラストです。クリスマスを全面的に出すのではなく、モチーフがある事で少し嬉しくなるラッピングシールです。

 

洋菓子店 AUDREY パッケージ

f:id:BOEL:20171109115642j:plain

 

D-BROS クリスマスラッピング

http://db-shop.jp/magazine/2016/11/4133

f:id:BOEL:20171109115728j:plain

 

まとめ

いかがでしたでしょうか。
今年のクリスマスは、プレゼントの包装紙やパーティの案内を自分で作ってみるのも楽しいかもしれませんね。クリスマスや冬を連想するモチーフや素材を使って、オリジナルのクリスマスカードをデザインしてプレゼントするのもいいかもしれません。

 

 

 

 

新しくなったGithub Desktopを使ってみよう

f:id:BOEL:20171027115311j:plain

 

Github Desktopのアプリが新しくなりました。
Github Desktopはソースやファイルのバージョン管理を行うGithubの機能を、コマンドを使わずグラフィカルユーザインターフェースで行える公式に配布されているアプリケーションです。
以前TIPSでも紹介しています。こちらも合わせてご覧ください。

GitHub Desktopを使ってみよう | TIPS | BOEL Inc. ボエル

 UIが一新され、要素配置やボタンの名前変更など従来に比べ変更されています。
今回の更新で使い勝手の違いや変更点、使用感をお伝えします。
また、100MB以上の大きなファイルを扱うことができるGit LTSの使い方、導入方法について紹介します。

 

アプリUIの変更

f:id:BOEL:20171027115514j:plain

UIの変更を見ていきます。
大きく変わったのは以前のバージョンまでは画面上部にあったhistoryの横軸ツリーがなくなっていることです。
代わりにボタンが大きくなり、画面が整理されました。

 

リポジトリリスト

f:id:BOEL:20171027115600j:plain

以前は左側にアコーディオンで表示していたプルダウンメニュー形式に変更になりました。
プルダウンを開くと現在の画面の上にリストを開く形となります。常に表示はできないようです。

 

◯changesとhistoryのボタン移動

changesとhistoryのボタンが画面上部からリポジトリーリストの下に移動しました。
より構造的な配置になっています。

 

◯Syncボタンの変更

今までの「Sync」ボタンが「Fetch origin」や「Push origin」等に変更されました。
こちらのほうがよりGit的な表記になりました。
今まで「Sync」一括りになっていたものが、状況に応じて表記が変わるようになりました。

 

挙動の変更

使っていて従来版と大きく変わったのが、「Fetch origin」する時の挙動です。
運用方法として1つのアカウントを複数PCからログインし、使用する形をとっています。
使い方による可能性も否めませんが、今まではコンフリクトが起こらない限り、Fetch origin(Sync)が出来ないことはなかったのですが、新しくなってからはリモートで更新があったファイルと同じものを編集していた場合、必ずローカルリポジトリにコミットしてからでないと、Fetch originでリモートリポジトリの内容がローカルに反映されません。
また、反映された後、他人の変更点を含んだ変更を自分の作業として「Merge branch ‘リポジトリ名’ of…」(コミット名(Summary)は変更可能)といった形でもう一度コミットしなければならなくなりました。
今までの上記を挟まない手順で慣れていたたため、運用方法も含め、検討が必要な箇所にもなります。

 

その他の変更点

f:id:BOEL:20171027115734j:plain

新しいアプリはElectronベースで開発されています。
メニュー内に項目があるため、Chromeおなじみのデベロッパーツールを開くことができます。(何に使えるか、と言うのはまだ未検証です)

 

ElectronとはHTML、CSSJavascriptをベースにアプリケーションが作成できるエンジンです。
ChromiumがランタイムとなっているためデベロッパーツールもChromeで見るものとそっくりになります。
Node.jsも同様にランタイムになっています。
(今回本題ではないためElectron詳しい説明は割愛させて頂きます。)

 

Git LFS

Githubでは基本的に100MB以上のサイズの大きいファイルをリモートリポジトリにPushすることができません。


そこでGit LFSという機能を使うことで100MB以上のデータを扱えるようになります。

GithubLFSをどうやって使うのか、使用後にデスクトップアプリでどのような表示、挙動になるのかを試してみます。

 

Git LFS(Git Large File Storage)は名前の通り大きいファイルを扱うための機能です。
利用するにはDesktopアプリだけでは完結できず、ターミナルからコマンドを入れる必要があります。
ただ、Desktopアプリもコマンドを扱うように作られているので、GUI上である程度操作を進めることも可能です。

 

準備

セットアップはMacでを進めていきます。
macOS 10.12.6 Sierra

 

まず、git lfsをインストールします。
インストールにはhomebrewを使います。
(使うにはXcode及びCommand Line Toolsのインストールが必要です。)
homebrewが使えない場合はHomebrewをまずインストールしましょう。

 

Xcode

XcodeApp storeからインストールが可能です。
少々ファイルサイズが重たく、インストールに時間がかかる場合があります。
App Storeで検索し、ダウンロード、インストールしましょう。

 

◯Command Line Tools

インストールしたXcodeを起動し、ライセンス使用許諾契約に同意します。
同意した後下記コマンドを入れます。

 

xcode-select --install

 

◯homebrewインストール

上記の準備ができたらhomebrewインストールを進めていきます。
下記コマンドを入れます。

 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

git lfsをインストールします。

 

brew install git-lfs

 

リポジトリlfsの反映

リポジトリディレクトリに移動し、lfsを反映させます。
cdコマンドで移動してもいいですが、アプリケーション上でもターミナルを開くことができます。
アプリケーションのリポジトリ選択で右クリックするといくつか選択肢が出てきます。
「Open in Terminal」を押すと、リポジトリディレクトリに移動した状態でターミナルを開くことができます。
リポジトリに移動したらコマンドを入れます。

 

git lfs install

 

反映したら下記コマンドを入れます。large_file.psdのファイル名は任意です。

 

git lfs track large_file.psd
git add .gitattributes

 

◯コミットとリモートへの反映

後は通常の手順でコミットとpushをします。
※large_file.psdのファイル名は任意
LFSテスト」の部分はSummaryになります。任意のものを入れて大丈夫です。

 

git add track large_file.psd

 

git commit -m 'LFSテスト'
git push origin master

 

これで完了です。
Github Desktopにもコミット内容が反映されているはずです。

 

まとめ

今回は新しくなったGithub Desktopの紹介とGit LTSの使い方を紹介しました。
開発やコードに関連するもの以外でも、Githubでは扱えるためデザイナーの方などエンジニアやコードを専門で扱わない方でも操作方法や仕組みがわかれば十分活用できます。
基本的にはDesktopアプリケーションで操作し、必要なときにコマンドラインを使う事ができれば、運用の幅が大きく広がると思います。
ひとつひとつはそれほど難しくないものも多いので苦手意識を持たず目的に沿ってどんな機能を使うか更に模索していきたいです。

高齢の方向けウェブサイトデザイン 8つのポイント

f:id:BOEL:20171004171556j:plain


こんにちは。デザイナーの那須です。
最近は、ご高齢でもパソコンやスマートフォンでインターネット(※)を利用する方が増えていますね。
総務省によると、2016年には60歳以上の方の約60%、60~64歳の方に限定すると80%以上が、インターネットを利用しています。
(※)パソコン、スマートフォンタブレット型端末、携帯電話・PHSスマートフォンを除く)、インターネット対応型家庭用ゲーム機、インターネット対応型テレビ受信機の合計

これからさらに増える高齢の利用者の方にも、快適にウェブサイトを見ていただきたいですね。
そこで、高齢の方にとって利用しやすいウェブサイトデザインのポイントをまとめました。

 

アルファベット・片仮名は使わない

表記は「ログイン」→「会員の方はこちら」、「Access」→「交通案内」など、漢字や平仮名にしましょう。
アルファベットや片仮名表記で示される外来語に馴染みがない方にも言葉の意味が伝わりやすいよう、配慮が必要です。

 

フォントは大きく

一般的に、高齢の方が読みやすいフォントサイズは16px以上です。文字の読みやすさは書かれている情報の理解度に直結するため、対象となるユーザーに応じた適切な設定が必要です。

 

行間は広めに

フォントサイズ同様気をつけたいのが、行間です。
line-heightが160~180%が読みやすいです。
行間が狭すぎると、行を移るときに次に読む行を見失いますし、反対に広すぎると、視線の移動距離が大きくなり疲れてしまいます。
フォントサイズはブラウザの表示設定などで変更できますが、行間はユーザー側での調整ができません。作る側がしっかり配慮しましょう。

 

色のコントラストに注意

テキストと背景は、しっかり色のコントラストをつけましょう。
日本工業規格「JIS X 8341-3:2010」では、テキストと背景のコントラスト比を4.5対1以上とするよう推奨しています。
白内障などにより視界がかすみ黄色味を帯びてくると、パステルカラーなどのペールトーンや彩度の低いカラーが識別しにくくなります。
特に黄色と白は識別しづらいので注意が必要です。

また、表示する色合いを変えられる機能を入れると更に利用しやすくなります。

参照:東京都 http://www.metro.tokyo.jp/moji.html

f:id:BOEL:20171004172352p:plain


無料のコントラスト確認ツールもあるので活用しましょう。

miChecker Ver.2.0
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

ColorTester
https://alfasado.net/apps/colortester-ja.html

 

ボタンは大きく、立体感を

ボタンやテキストリンクは大きくしましょう。主要なボタンは、幅が32px以上あるとよいです。
入力フォームなどにあるチェックボックスやプルダウンも、適切な大きさに設定する必要があります。
カーソルを数ミリ動かしたり、小さなボタンをタップしたりするなどの細かい動作が必要ないよう、手先が不自由な方の利用も前提とした設計が必要です。

また、フラットデザインのボタンは、単に背景が塗りつぶされたテキストに見えてしまいます。
薄い影を入れるなどして立体感を出し、心理的に「押したくなる」ボタンにしましょう。

参照:資生堂 プリオール https://www.shiseido.co.jp/pr/question/

 

f:id:BOEL:20171004172428p:plain

 

アイコンにはテキストを添える

アイコンがなにを意味するか、テキストで補足を入れましょう。
アイコンは文字分のスペースを節約でき便利ですが、普段からWebサイトを利用していない場合、アイコンの意味がわかりにくく感じられる方や、アイコンをクリックすると詳細な情報が表示されることが理解しにくい方もいます。

参照:近畿日本ツーリスト http://www.knt.co.jp/

f:id:BOEL:20171004172645p:plain


「表」で比較しやすく

ウェブサイト上で数種類の商品やサービスを比較したいとき、主要な情報をまとめた一覧表があると便利です。
ページの行き来が多いと、今いるページや元のページへの戻り方がわかりにくくなるため、同じページで複数の情報を比較できると親切です。

「LIFULL介護」のページでは、違いのわかりにくい老人ホーム・介護施設が一目で比較できる表が掲載されています。

参照:LIFULL介護 https://kaigo.homes.co.jp/manual/facilities_comment/list/

f:id:BOEL:20171004172619p:plain


問い合わせ電話番号はファーストビューに

問い合わせ対応用の電話番号がある場合、ファーストビューの範囲内に設置しましょう。
高齢の方にとって「困った時にすぐ電話で直接相談ができる」ことは心強いものです。メールや問い合わせフォームの利用に不慣れな方にとっても、電話番号はすぐ見える場所に入れると親切です。

 

まとめ

いかがでしたでしょうか。
ウェブサイトを作る時、自分では見やすいと思っても、様々な方に見ていただくことを十分考慮してデザインしたいですね。
先に挙げたような小さな工夫をすることで、幅広い年代の方にとってわかりやすい、快適なウェブサイトを増やしていきましょう。

 

参考サイト

総務省「平成29年版 情報通信白書」
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc262120.html

Web担当者Forum

「シニアフレンドリー最適化=SFO」の背景と重要性を認識しよう(全6回の1)」
http://web-tan.forum.impressrd.jp/e/2015/10/02/20679

「ネットはまだアヤしい場所? シニアの心理的ハードルを下げ安心してもらう6つの方法(全6回の2)」
http://web-tan.forum.impressrd.jp/e/2015/11/06/20680

「シニアの認知能力でも快適にサイトを使えるようにする7つの“技”(全6回の3)」
 http://web-tan.forum.impressrd.jp/e/2015/12/01/20681

「文字サイズだけでは不十分! 老いた眼や手でも使いやすいサイト作り7つのポイント(全6回の4)」
http://web-tan.forum.impressrd.jp/e/2016/01/21/21867

hi-posi Front-End blog「50代以降をターゲットにしたWebサイトのUI事例」
http://hi-posi.co.jp/tech/?p=330

WebA11y.jp「各チェックツール」
https://weba11y.jp/tools/testing_index/

LIG「デザイン上達の秘訣は「文字の扱い方」!テキストを読みやすくする5つのポイント」
https://liginc.co.jp/225369

長野県建築士会諏訪支部青年委員会「高齢者にやさしい色彩計画」(PDF)
http://www.arcsuwa.com/committee/seinen/koureisyaniyasasii.pdf

UI向上に必須。マイクロインタラクション10選

f:id:BOEL:20170928121452j:plain

こんにちは。デザイナーの寺田です。
TIPS vol.59で「WebライティングでUIデザインの品質を高める」をご紹介しました。
今回は、ライティングとともにWebサイトの品質を高めるために、ぜひこだわりたい、
マイクロインタラクションについてご紹介します。
Googleが薦めるマテリアルデザインの出現から、マイクロインタラクションを用いたWebサイトがほとんどです。

マイクロインタラクションをWebサイトに取り入れることでUIの向上につながります。
ただ、単純に動きを入れたらUIが向上するということではないので、 マイクロインタラクションの実装のポイントや実例をこれからみていきましょう。

 

マイクロインタラクションとは

ハンバーガーボタンをクリックした時のアニメーションなど、 ユーザーの行動に対して起こるアクションのこと。
以下の内容は、UIを高めるに当たって必要なアニメーションです。
また、PANTONEが2017年秋におすすめの10色を発表しました。いずれも落ち着いた素敵な色なので、デザインに取り入れてみてはいかがでしょうか。
・状況を伝え、フィードバックを提供する
・ユーザーに、より直接的な操作を行っていると感じられるようにする
・ユーザー自身が行ったアクションの結果を分かりやすくする

 

使ってみたいインタラクション例10選

Webサイトの状況を伝える

Webサイトの状況を伝えるとは、Webサイトで今何が起きているかをユーザーに発信し続けるということです。 ユーザーは早いレスポンスを期待しますが、ユーザーの環境などでWebサイトが反応を返すまでに時間がかかる場合があります。 その際には、ローディングを表示させましょう。状況を伝えることでユーザーのストレスは軽減します。
普通であれば、ストレスとなる状況でもアニメーションを使って ユーザーにWebサイトの体験を良いものにしていけたらベストですね。

f:id:BOEL:20170928122354j:plain

参考サイト
https://codepen.io/khadkamhn/pen/ORVNrW

 

CTA(Call To Action)/コールトゥアクション

CTAとは日本語では行動喚起とされています。
魅力的なアニメーションを実装することで、ユーザーの興味を引き、次のアクションへと誘導することが可能になります。

f:id:BOEL:20170928122513j:plain

参考サイト
https://codepen.io/Schlipak/pen/vXkYpp?q=micro%20interaction&limit=all&order=popularity&depth=everything&show_forks=false
https://codepen.io/aarongrieve/pen/KqxRWY?depth=everything&limit=all&order=popularity&page=5&q=micro+interaction&show_forks=false

 

強調する部分を伝える

CTAとは日本語では行動喚起とされています。
スペースを節約するために、必要に応じてアプリ内のボタンを別のものに置き換えることがあります。
その際にアニメーションはユーザーを引きつけ、伝えたい情報を見落とさないようにします。

f:id:BOEL:20170928122823j:plain

 

参考サイト
https://bootsnipp.com/snippets/featured/material-toggle-button
https://codepen.io/andreasstorm/pen/OmBdpO

 

インタラクションのルールを統一する

スマホやスマートウォッチという小さい画面において、たくさんの情報を表示させることは難しい場合があります。インタラクションでユーザーが今いる場所を把握でき、ユーザーの行きたいページへすぐに行くことができます。

f:id:BOEL:20170928122945j:plain

参考サイト
http://significa.pt/labs/css-only-slider/
https://codyhouse.co/demo/stretchy-navigation/index.htmlhttps://tympanus.net/Blueprints/PageStackNavigation/

 

データ入力を視覚的にする

データ入力のクオリティーを高めることで、Webサイトの質はグッと高まります。
ユーザーにとってデータ入力はめんどくさい作業ですが、マイクロインタラクションを取り入れることで、ユーザー体験が向上します。

f:id:BOEL:20170928123043j:plain

参考サイト
https://codepen.io/wicek3d/pen/xRyrmP?depth=everything&limit=all&order=popularity&page=3&q=micro+interaction&show_forks=false
https://tympanus.net/Development/TextInputEffects/

 

まとめ

いかがでしたでしょうか。
UIの向上のためにインタラクションは今では、必須の項目となっています。 サンプルのソースも探せば、たくさん出てきますので 試したりアレンジしたり、インタラクションを使うことの自分なりの答えを出してみてください。

参考サイト
http://uxmilk.jp/3553
http://www.seleqt.net/design/micro-interactions/

https://www.webprofessional.jp/animations-using-easings-to-craft-smarter-interactions/
https://webnaut.jp/design/1134.html 

https://techacademy.jp/magazine/11670