Good Thingsマーケブログ

Good Thingsのディレクターが日々制作や開発で知った知識を発信していきます。

Google Chromeがデザインリニューアル!

Google Chromeが10周年で、新デザインになった「Google Chrome69」が公開されました。

 

 

「Google Chrome69」の新しい特徴

 

forest.watch.impress.co.jp

 

9月4日(現地時間)に米Googleにて発表された「Google Chrome69」。

新デザインが導入されたほか、機能強化や改善もされたようです。

 

新デザインの特徴は丸みを帯びたデザインということで、検索窓も丸みを帯びました。

 

f:id:good-things-inc:20180915164406p:plain

 

タブも角丸になり、フラットデザインが適用されシャドウが廃止に。

f:id:good-things-inc:20180915163351p:plain

 

機能としてもアップデート

オムニバーのアドレス表記も、これまでは鍵アイコンと「保護されたラベル」とテキスト表示されていたものが、鍵アイコンだけに。

GoogleはWebサイトのHTTPS化に力を入れていますが、いずれはこの鍵アイコンもなくなる見込みのようです。

その他にも

  • CSS Scroll Snap:Java Scriptで実装されていた、スムーズにスクロールして位置をピタッと止める機能をStyle Sheetだけで簡単に記述できる
  • Display cutouts:各デバイスのディスプレイにWebページを最適化する
  • Web Locks API:同じWebアプリケーションが複数のタブで実行されている場合同じスクリプトが同じLockを取得できないように
  • パスワードマネージャー:ブラウザに同じアカウントでログインしていればPC・スマートフォンと同期されるように
  • アドレスバー:アドレスバーから直接Googledriveのファイルが検索可能に
  • 開きすぎ防止:24タブ以上開いている場合は既に開かれている同ページのタブに移動
  • 円形グラデーション:CSSのみで円形のグラデーションを描けるように

など。より便利にグレードアップ。

 

Wbサービスのアップデートに、戸惑うユーザー

Wbサービスの進化は、ユーザーのストレスを生みやすく戸惑うことも多いのが常です。

慣性で操作していると、デザインリニューアルは一時期ユーザーにサービス低下の印象を持たせてしまいます。

特に今回はChromeGmailのアカウントの同期があり、GmailからサインアウトするとChromeからもサインアウトしてしまうようです。

www.lifehacker.jp

 

サービスとしての意図もあり、ユーザーも戸惑ってしまうこともあるとは思いますが、サービス運営者としては様々なユーザーがいるなかで、大量のフィードバックに振り回されず、提供していきたいものをしっかり見つめて良い道を選択していきたいものです。

検索結果、サイトリンクの最新情報を調べてみた

ディレクターだと、よく受ける相談のひとつに「検索結果をきれいに見せたい」という要望があるかと思います。

具体的には、サイト構造を以下のように、ツリー構造を保った状態で表示させたいというご要望です。

 

 

検索結果面を大きく専有する「サイトリンク」

例えば「Amazon」のキーワードで、Googleで検索をしてみます。

f:id:good-things-inc:20180912152553p:plain

検索結果に表示される「カテゴリー」や「本・書籍...」の部分がサイトリンクと呼ばれています。

Googleの公式ヘルプページによると

ユーザーの役に立つとGoogleが判断した場合のみ、検索結果に表示されます。

と記載されていますが、一方で

将来は、ウェブマスターによる入力を取り入れる可能性もあります。

ともあるので、そのうち編集も可能になる可能性はあるようです。

サイトリンク - Search Console ヘルプ

 

サイトリンクを表示させられるようにするには?

アルゴリズムによって決定されているとはいえ、できるアプローチもはずです。

1. sitemap.xmlを設置する

2. サイト構造とナビゲーションをわかりやすくする

3. ナビゲーション内にaltを追加する

4. 構造化データマークアップを実装する

 

以前は、Google Seaech Consoleから特定のページの順位を下げることでサイトリンクをコントロールすることもできていたようですが、2016年10月以降はこの機能も停止されているようです。

 

ぱんくずリストを作成したり、細かくリンクを整理したりすることでよりよい検索結果になるように、コツコツ対応していくのが良いように思いました。

 

名刺を作る時、うっかり忘れがちな情報がまとまっている!「名刺の力.com」

自社で名刺を作ることになると、スタートアップのような小さな会社ではデザイナーやディレクターに相談が来ることも多いのではないでしょうか。

 

改めて作ろうと思うと、

「あれ、住所の英語表記って合ってたっけ?」

「役職名どう表現するの?」

と不安に感じる点も出てくるはず。

 

たまたま見つけた「mbe 名刺の力.com」さんのサイトでは、英語表記がさくっと1ページにまとめられています。

f:id:good-things-inc:20180906100021p:plain

www.meishi-no-chikara2.com

 

テンプレートもたくさんあるので、ちょっと困ったときは、こちらを見てもいいかもしれません。

最近良く見るあれ、「・・・」ボタンの名称を調べてみました

前回に引き続き、ツールに関してです。

最近良く見るデザインのトレンドとして、・を3つつなげたボタンやメニューを見ることが多くなってきました。

例えば

ドットボタン | GoodThings

のようなボタンのことです。

 

このボタンをなんと呼ぶのかな?と調べていたのですがなかなかそれらしいものが見つからなかったのですが、この動画で発見。

youtu.be

Microsoft Edgeでは「dot dot dot button(ドットドットドットボタン)」と表現している様子。

 

これが正しい正式名称なのでしょうか?

ご存知の方、いらっしゃれば教えて頂けるとうれしいです。

何気なく使っている "tooltip(ツールチップ)" を改めて調べてみました

ディレクターの仕事のひとつ、「画面設計書」の作成は大切な仕事です。

この設計書が基本となって、システムの設計書やデザインルールが構築されることも多いのではないでしょうか。

 

 

画面設計書を作る際に、出てくる様々な要素の中にツールチップと言われるものあります。

普段何気なく使っているツールチップについて調べてみたのでご紹介させていただきます。

 

 

 

1. ツールチップ(tooltip)とは?

wikipediaによると

グラフィカルユーザーインターフェースGUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。

これはカーソル(主にマイスポインタ)と連動して使用される。ユーザーがカーソルをなにかの項目に合わせた時、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。

ツールチップ - Wikipedia

という表現で記載されています。

例えば

f:id:good-things-inc:20180825151342p:plain

のようなものが、ツールチップに当たります。

 

2. ツールチップを使うのに最適な箇所

バーして表示されるので、画面の中で「できれば説明をいれたい」時などは役に立ちます。

例えば、これはWikipedia内で文言にマウスオーバーすると表示される説明のウィンフォウですが

f:id:good-things-inc:20180825152601p:plain

見ている画面の容量は決まっていて、重要度の高い情報から掲載したいけどできれば入れておいたほうが親切かなと思われる説明箇所にはとても有効なツールです。

 

 

3. ツールチップの問題点

それはやはり「ホバー」で出てくるということ。

PCのWebサイトでは使用は全く問題ありませんが、タッチ操作のデバイスであるスマートフォンタブレットではクリックと区別がつかないため、採用しないほうがよいです。

 

また、ツールチップ内でアクションさせることは、ツールチップ自体マウスを動かすと消えてしまうこともあり、操作性がよくありません。

 

 

各パーツの特性を、理解できていると設計と実装の乖離が少なくなり、出戻りが少なくスムーズに開発が進むので覚えておきたいポイントです。

 

Slackで「Enter」で「送信」する設定

コミュニケーションツールとしてSlackを採用している会社は、最近とても多いと思います。

通知や細かい設定ができて、とても便利ですよね。

 

 

Web制作や開発を行っていると、複数の会社の環境に入ることになるのでその都度設定をする必要があるのですが、うっかり忘れがちなのでご紹介します。

 

1. 左上のプロフィール表示エリア

「環境設定」をクリック

f:id:good-things-inc:20180820113217p:plain

 

2. 詳細設定→「送信ボタンを表示する」

デフォルトで入っているチェックを外せば、投稿画面から「送信」ボタンが消えます!

 

f:id:good-things-inc:20180820112826p:plain

 

ちょっとしたことですが、メールよりチャットツールを導入する企業は、少しでもコミュニケーションを簡易にして仕事を進めたいもの。
操作を省くのは、そのひとつになりますよね。

 

 

WordPressでGmailと連携するときの注意点:エイリアスを追加していますか?

先日、掲載させていただいた、こちらの記事。

good-things-inc.hatenablog.com

 

他のサイトでも要望があり、追加したのですが、WordPressから送るメールアドレスにMLを使用したい場合はうっかりすると驚くことになってしまったので、備忘のために記事にしておきます。

 

1. GSuiteで連携するアカウントの権限

操作自体はとても簡単なGmailでの連携ですが、連携する際のアカウントが重要になります。

f:id:good-things-inc:20180818174126p:plain

 

まず、一番操作で躓かないためには、操作する方の権限が「特権管理者」などでGoogle Groupsの設定を変更できる方が操作していただくのが一番。

https://admin.google.com/ac/users

 

WordPressプラグイン「WP Mail SMTP」でGoogleと連携する前に。

1. お問い合わせのフォームで飛ぶメールのfromのMLをGoogle Groupsで設定します。

2. 1で設定したGroupに連携するGmailアカウントのメールを追加します。

 f:id:good-things-inc:20180818180128p:plain

 

3. Gmail → 右上の歯車マーク → 設定 → アカウント →「他のメールアドレスを追加」で追加したいMLを入力します。

この時、「エイリアスとして扱います。」のチェックをお忘れなく!

f:id:good-things-inc:20180818180406p:plain

 

この設定を忘れてしまうと、WordPressから送られるメールアドレスが個人のアカウントになってしまいます。

 

 

設定が終わり次第、プラグインからGmailを選択してログインしてもらえればOK。

途中、MLを選択する箇所がありますのでそちらをお忘れなく。

 

 

うっかりすると手こずってしまう部分ですね。

 


Copyright © Good Things, Inc.