デュオトーン

レスポンシブウェブサイトの普及によって、色数が少なくフラットなカラーリングが好まれるようになり、それに合わせて色数が増える手法が比較的控えられる傾向になっています。
そこで今回は、「デュオトーン」という最近流行したデザイン手法についてです。

Year in Product Design

デュオトーンは「Duo ふたつの」「Tone 色」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を使用したデザインや画像処理の事を指します。インクのカラー数を2色のみに制限して出力した印刷業界での「2色刷り」とほぼ同じ表現手法で、デザインとしては目新しいものではありません。

ウェブデザインにおいてデュオトーンが流行したのは、レスポンシブウェブサイトとの相性が良かったからで、カラー数を増やすことなく単純なフラットデザインのウェブサイトとの差別化を図ることができます。

MORE WORKS

特定のカラーで世界観を主張できるデュオトーンは、ウェブサイトデザインだけではなく、スタートアップ企業のロゴやウェブサイト、スマートフォンアプリなど媒体を選ばず使用されるようになってきています。

Flashとは?│Web用語集

Flash(フラッシュ)はインターネットが普及し始めた初期から存在する、Web上でアニメーションや動画、ゲームなどを扱うための規格のひとつです。
データが小さく高度なプログラミングも可能なことから、かつては多くのWebサイトで使用されていました。
特に2000年代前半はFlashの全盛期で、フルFlashで制作されたWebサイトも多く登場し、個人でもFlashアニメなどの制作を楽しむ人がたくさんいました。

ところが2005年に開発元のマクロメディア社がアドビシステムズ社に買収されると、2010年頃からFlashは衰退し始め、2011年にはモバイル向けのFlash開発が終了。
さらに2020年にはFlash Playerの配布やアップデートが終了となることも決まり、Google Chromeをはじめとした主要WebブラウザもFlash機能が削除されることが決まりました。

アニメーションなどの動きがあるWeb表現を見るとFlashと言う人がいますが、すでにほとんどのWebサイトでFlashは使われておらず、HTML5などの新しい技術で表現をしているのです。

Flashについてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
Flashが衰退した理由
復習クイズ

●他のサイトでの説明

仕組みからわかりやすく書かれています。
https://ferret-plus.com/904

Flashの歴史がしっかり書かれています。
https://ja.wikipedia.org/wiki/Adobe_Flash

Flashが廃止になった理由まで説明されています。
https://www.asobou.co.jp/blog/web/flash-html5

●Flashが衰退した理由

Flashは2011年にモバイル向けの開発が終了し、2020年にはプレイヤーの配布も終わることになってしまいました。
2000年代前半の全盛期からは信じられない衰退ぶりですが、それには仕方ない理由がいくつかあったのです。

■通信速度が上がり、データが軽いという長所の価値がなくなってしまった
インターネットの通信速度が格段に上がり、動画などのデータが重いコンテンツもストレスなく再生できるようになったため、データが軽いという長所があまり意味のないものになってしまいました。

■iPhoneやiPadなどで再生できない
アップル社のモバイル端末でFlashの再生ができないことから、モバイル向けの開発が終了してしまい、衰退に拍車がかかりました。

■セキュリティの脆弱性
Flashはハッカーの攻撃対象になりやすく、セキュリティに大きな不安が出てきてしまいました。

■読み込みに時間がかかるため、消費電力が大きい
ブラウザがクラッシュしてしまう原因にもなります。

■再生にはプラグインが必要
代替として使われ始めたHTML5にはプラグインが必要ありません。

主に上記のような理由から、FLASHからHTML5への移行が加速し、Flashは衰退し始めたのです。
時代の変化に伴い、役割を終えたとも言えるでしょう。

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

マーケティングまずは「STP分析」から

新たなビジネスや商材を展開する時、ただリリースをしても、狙っているユーザーへ情報が届かなかったり、情報を正しく伝えることができないなど、問題が重なって思うような利益を得られずに時間が経過してしまう可能性があります。そのようなことを避けるために、検討段階で様々な視点から分析を行う必要があります。

今回は、まず最初におさておきたい「STP分析」を紹介します。
STP分析とは、マーケティング論で有名なフィリップ・コトラーが提唱したフレームワークで、業種や商材などを問わず活用することができます。

STP分析とは

“Segmentation(セグメンテーション、市場細分化)”
“Targeting(ターゲティング、狙う市場の決定)”
“Positioning(ポジショニング、自社の立ち位置の明確化)”
の、3つの英単語の頭文字をとって名付けられた分析法を「STP分析」といいます。

この分析では、 “セグメンテーション(市場細分化)”で市場の全体像を把握して、“ターゲティング(狙う市場の決定)”でその中から狙うべき市場を決定します。その後、“ポジショニング(自社の立ち位置の明確化)”で競合となる企業と自社の位置関係を決定します。

決定していく中で重要なポイントは、ユーザーのイメージを常に意識し、行動を客観的に把握し、それに応じた事業展開を行うことが大切になります。

STP分析を行う主なメリット

1. 顧客やニーズの分布を整理することができる
2. 自社のプロモーション戦略を明確にすることができる
3. 他社との競合を回避することができる

 

こういったマーケティングのフレームワーク分析は、有名なものではSWOT分析や4P分析など多くのものがあり、全てを一度に行うことは難しいと思います。
最初の一歩として、「STP分析」からチャレンジしてみると良いかもしれません。

Windows Updateによるトラブル

先日、パソコンでイラストを描くときに使っているペンタブレットが突然変な動作をするようになってしまいました。
ペンを操作していると突然マウスのクリックを連打しているような動作をしたり、拡大や縮小がうまくできなくなってしまったりと、まともに操作をできないような状態になってしまったのです。

こういった不都合が出たときにはまずOSを再起動したり、ペンタブレットを一旦外してつけ直してみたり、ペンの電池を交換してみたり、ペンタブレットやイラストを描くのに使っているソフト(Adobe Photoshop)を一度アンインストールしてから再インストールしたりすればたいてい直るもの。
しかし今回ばかりは何を試してみても異常が直ることはありませんでした。

これは本格的に故障してしまったかな……と思い、タブレットのメーカーに問い合わせをしてみると、なんと同じ症状で悩まされている人が続出しているとのこと。

まさかWindows側のエラーだったとは

そしてトラブルの原因はペンタブレットやソフト(Adobe Photoshop)にはなく、自動でアップデートされたWindowsの更新プログラムの内容にエラーがあり、それによって不都合が起きてしまっているとのことでした。
まさかWindows側のエラーだったとは……!

Windowsの更新プログラムはさかのぼってアンインストールできるので、エラーを起こしているプログラムをアンインストールすると、無事にペンタブレットが正常に動作するようになりました。

Windows Updateはパソコンに障害をもたらす可能性のある問題を修正するプログラムを更新してくれるものなので、セキュリティのことを考えると絶対にしておいた方が良いものです。
ただ今回のように他のソフトに影響を及ぼすこともあるということは覚えておいたほうがいいですね。
ペンタブレットに限らず、原因不明のエラーが起こり、何をしても直らないというときはWindows Updateに原因があるかもしれないと疑ってみましょう。

モバイル検索のランキング要素に「ページ読み込み速度」が加わります

7月からGoogleは、モバイル検索のランキング要素にページの読み込み速度を加えます。
「スピードアップデート」と呼ばれ、1月に発表されていました。
今回は、ページ読み込み速度を最適化する方法を今一度整理してみます。

画像やプログラムを軽量化する

ウェブサイトの文字を画像にすることを避けたり、デバイスによって適切なサイズの画像を使用しましょう。
ウェブサイトで使用しているプログラム(CSSやJavascript)も圧縮が可能です。使用していない不要なコードがないか確認するのも効果的です。

ブラウザキャッシュを利用する

ユーザーのパソコンやスマートフォンにウェブサイトの情報の一部を保存する「ブラウザキャッシュ」を活用するのも有効な手段のひとつです。
「.htaccess」というサーバー内のファイルにプログラムの記述を行うだけで設定することができ、手軽に行うことができます。

コンテンツキャッシュ機能を利用する

レンタルサーバー会社によっては、ウェブサイトの表示速度の高速化と安定化を実現する新機能「コンテンツキャッシュ機能」の提供を始めています。
「コンテンツキャッシュ機能」は、キャッシュサーバーにウェブサイトのコンテンツを一時保存し、コンテンツ表示待機時間を短縮するのですが、細かいことはわからなくても「利用する」にチェックを入れるだけでウェブサイトの表示が高速化されます。まずは自社で契約しているレンタルサーバーがこの機能の提供を始めているか、確認してみましょう。

参考:レンタルサーバー「ロリポップ!」Webサイト表示速度を高速化する新機能「コンテンツキャッシュ機能」を無料提供 https://pepabo.com/news/press/201803271545

「Google Maps Platform」の開始でweb担当者が気をつけること

5月2日のGoogleの公式ブログで「Google Maps Platform」の提供開始がアナウンスされ、Google Map APIの仕様が大きく変わることが発表されました。詳しく書くとあまりにも専門的になってしまうので、おおまかにご説明します。

Google Map APIとは

webサイトにGoogle Mapが埋め込まれていて、地図の色を標準のものから変えたり、ピンの代わりに会社のロゴを使ったり、経路表示をする場合などに使う、Google Mapをカスタマイズするためのプログラムのことです。

Google Maps Platform で何が変わるのか

無料で利用できる範囲の変更

今までは「Google Maps APIs Premium Plan」(有償版)と「Google Maps APIs Standard Plan」(無償版)があり、機能の制限はあるものの無償版の方でもGoogle Maps APIを使うことができました。
これが「Google Maps Platform」に統合され、利用状況に応じて課金されることになります。ただし、毎月200ドル分は無料で利用できます。地図の色を変えたり、ピンの画像を変えたりなど、単純なAPI利用でいくと、28,000回分に相当する、と言われています。
つまり、Google Mapを埋め込んでいるページが月に28,000回読み込まれなければ費用は発生しません。

APIキーなしでのAPI利用が不可に

Google Map APIを利用する際は、通常は「APIキー」というプログラムを使うための認証コード(Microsoft Officeのプロダクトキーのようなものだと思ってください)をGoogleの管理画面から発行して使うルールにはなっているのですが、実際はAPIキーを発行しなくても利用できる仕様になっていました。これが2018年7月16日以降はできなくなり、APIキーなしで埋め込まれている全ての地図は、地図の埋め込み箇所がグレーに塗りつぶされて表示されます。

web担当者として気をつけること

もしあなたがweb担当者なら、以下の点に気をつけてください。

1.APIキーを発行してGoogle Mapを埋め込んでいるか

上記のように、APIキー発行なしでGoogle Mapを埋め込んでいる場合、7/16以降は地図の表示ができなくなります。APIキーを発行しているかどうかは、htmlソース上から判断できますが、分からない場合は担当制作会社に確認をしてください。

2.Google Mapを埋め込んでいるページが月に28,000PV以上いかないか

Google Mapを埋め込んでいるページが月に28,000PVを超えてしまうと、APIの設定内容によりますが、1,000PVあたり2〜7ドルを支払う必要が出てきます。Google Analyticsなどで当該ページの平均PVを確認しておきましょう。

リファラーとは?│Web用語集

リファラー(referrer)とはアクセスログに記録されるデータのひとつで、主にSEOで使われる用語です。
リファラと表記する場合もあります。

リファラーは、ユーザーがWebサイトに流入してくる直前に閲覧していたWebページのURLのことを意味します。

例えば「WebページA」の中にあるリンクをクリックして「WebページB」を開いた場合のリファラーは「WebページA」です。また、Google検索によって「WebページB」を開いた場合のリファラーは「Google」となります。

また、ブックマークなどから他のページを経由せずに流入した場合はリファラーなし(ノーリファラー)となります。

リファラーを調査すると、ユーザーがどのような経路でWebサイトに流入しているのかわかるため、Webサイトのアクセス数が増減した際にどのサイトからの流入数が増減しているのかわかります。

Googleなどの検索エンジンから流入している場合は、ユーザーがどのようなキーワードで検索しているかも調べることができます。

リファラーについてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
リファラーとSEOについて
復習クイズ

●他のサイトでの説明

すっきりとわかりやすい解説です。
https://www.seohacks.net/basic/terms/referrer/

Google Analyticsでのリファラーの調べ方まで紹介されています。
https://seolaboratory.jp/40584/

●リファラーとSEOについて

リファラーが増えるということは、他のサイトからの流入が増えるということなので、サイトのアクセス数を増やすための大切な要素となります。
リファラーを増やすためには、以下のようなことに気を配りながらサイトを制作、運営することが大切です。

・良質なコンテンツを作り続ける
良いコンテンツは他のサイトからリンクされやすくなります。

・良質なコンテンツを宣伝する
作ったコンテンツがユーザーの目に留まる機会を増やす必要があります。
良質なコンテンツであれば、広告宣伝の効果も大きくなるはずです。
SNSを使った宣伝も効果的です。

・SEO対策を行う
直帰率や平均セッション時間などを改善しながら、検索順位を上位にできるように取り組みましょう。
トラフィックが増えればリファラーも増えるはずです。
 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

消えてしまったWebサイトの探し方

見ようと思っていたWebページが削除されてしまい、どうにかもう一度見ることはできないものかと困ったことはありませんか?
そんなときに便利なのが「Internet Archive」というサービスです。

Internet Archive

英語のサイトになっていますが、検索窓にURLを入力するとカレンダーが表示され、見たい時期にさかのぼって閲覧することができます。

例えば、Yahoo!JapanのURL(http://www.yahoo.co.jp/)を検索するとこんな感じになりました。

1996年のデータから残っているようなので、一番古いデータを表示させてみると……

なんとも味気ないページが表示されました。今から22年も前のYahoo!Japanはこんな感じだったのですね。

このサービスはWeb制作においても役立つことが多く、例えば「もう消えてしまったWebサイトをリニューアルして復活させたい」なんていうときに、このサービスで以前のWebサイトを表示させて消えてしまった情報を吸い出す、なんていうこともできます。

また、Yahoo!Japanのように巨大なWebサイトだけでなく、URLさえわかれば、個人で作ったレベルのWebサイトも調べられます。
試しに私の個人サイトも調べてみると、2004年頃のデータが残されていてなんとも恥ずかしい気持ちになりました……。

このようにデータが残っているのは便利ではありますが、逆に言えば一度インターネット上に公開したデータは削除してもこのような形で残る可能性があるということ。
ネットに何かを公開するときは最新の注意を払うようにしたほうがいいですね。

スプリットスクリーンレイアウト

スプリットスクリーンレイアウトとは、画面を大きく分割して、片方をメインエリアもう片方をサブエリアとして機能させることで印象的なウェブサイトを構築するレイアウト手法です。

大学サイトでの使用例(東京農業大学)

スプリットスクリーンレイアウトのメリット

一見奇をてらった大胆なレイアウト手法のようにも見えますが、メインエリアにタイトルや重要なメッセージを、サブエリアに詳細な情報を掲載することで項目の情報をわかりやすく配置することができます。レスポンシブデザインとの相性も良く、パソコン時は横並び、スマホ時は縦並びのようにレイアウトの調整が比較的簡単に行えます。

旅館サイトでの使用例(山河旅館)

スプリットスクリーンレイアウトのデメリット

普段からよくウェブサイトを閲覧するユーザーにとってはさほど目新しいレイアウトではなくなりましたが、そうでないユーザーがターゲットの場合は、見慣れないユーザーインターフェイスを理解してもらうため、複雑なパララックス効果の使用を避けたり、ボタンやリンクをわかりやすいデザインにしたりするなどの工夫が必要になります。

まとめ

ターゲットユーザーの「慣れ」の部分を除けば、業種を問わず使用できるスプリットスクリーンレイアウト。このようなレイアウトも今後さらに増えていくでしょう。

ロジカルシンキングのすゝめ

ウェブディレクターとして働き始めた頃、「この仕事に重要なのは何か?」と自分に問うていた。
技術力?広い知識?そしてそれは、コミュニケーション力だと気がついた。認識違いや無駄は往々にして生まれてしまうものだが、できれば誰にとっても納得のできる、スッと理解できる方法を取れるのが良いと思った。
そして私は、「ロジカルシンキングを鍛え、習慣化しよう」という趣旨のセミナーに参加して、論理的に考え整理するスキルを学んだ。

■ロジカルシンキングとは

logical thinkingの和訳は論理的思考。複雑に情報が入り混じった問題を、各要素に分けて整理することで、問題の理解を深める。理解を深めたら、仮説を立て、情報や分析結果を基に検証し結論を出すことができる。

■ロジカルシンキングを身につける

メリットロジカルシンキングは複雑な情報をシンプルに整理するスキル。それが出来れば、相手にわかりやすく説明することができ、資料を作成しても自分の主張が伝わりやすくなる。また、効率よく掘り下げて考えると、原因が明確になり、解決の為の道筋を考えられるようになる。

■ロジカルシンキングの基本的な考え方                                    MECE(ミーシー)と、So What?Why So?(だから何?それはなぜ?)

・MECE(ミーシー)とは、【Mutually Exclusive Collectively Exhaustive】の頭文字で「モレなくダブリなく」という意味。MECEを意識すると、論点の見落としや、同じことを繰り返し考えることがなくなり、効率が良くなる。
・So What?Why So?(だから何?それはなぜ?)と考えて結論を探り、さらに原因を深堀りする。

ロジカルシンキングは、日常の生活の中で十分に鍛えることができる。それは、いたってシンプルな次の2点

1.意識して結論から話す
2.どんなことにも仮説を立てる

お金も時間もかからず、変化を実感できるのでオススメしたい。私も、絶賛ロジカルシンキングトレーニング中…日々精進。

移管とは?│Web用語集

移管とは、その言葉の通り「物事の管理や管轄を他に移すこと」を意味しますが、Webにおいては主に「ドメイン移管」または「サーバー移管」のことを指します。

どちらの場合も「移管」と省略して伝えることがあるので、ドメイン移管のことを指しているのか、それともサーバー移管のことを指しているのか、しっかり確認しておく必要があります。

移管はWebサイトのリニューアルなどとあわせて行うことが多いです。
また、「移行」「引越し」などと言うこともありますが、基本的には同じ意味になります。

ドメイン」と「サーバー」が混同してしまう方も多いので、不安な方はそれぞれの解説ページをご覧ください。

移管についてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
使用例
復習クイズ

●他のサイトでの説明

ドメイン移管についての説明です。
https://www.nadukete.net/domain-guide/transfer/whatis.html

ドメイン移管とサーバー移管の違いについて説明されています。
https://queseraserakko.com/transfer-domain-name/

●使用例

「サーバーのサポートが終わっちゃうからサーバー移管しないと」
「サーバーとドメイン移管も弊社で行いますか?」
「管理費が高いのでドメイン移管を検討しています」

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

「QRチケット」で野球観戦

先日、ヤクルトスワローズ戦の「QRチケット」を購入して神宮球場へ行ってきました。

プロ野球もそうですが、他のスポーツや音楽のコンサートなども、インターネットやスマホで予約しても、コンビニで発券したり郵送で送ってもらったりと、最後は割とアナログなやり取りが必要になります。チケットというとまだまだ紙のチケットが主流です。

ヤクルトスワローズの公式チケットサイトからチケット購入の手続きを終えると、登録したメールアドレスにQRコードを表示する用のメールが届きました。
そして試合当日、球場に設置されている端末にQRコードをかざしたら、入場や座席の確認に必要なレシートが発行されました。

今回は自分のチケットだけの購入でしたが、公式チケットサイトには「購入確定後、チケット1枚に対して発券用QRコード確認メールが1通届きます」と書いてありました。
従来の紙のチケットだと、仲間の分も購入した場合は事前に渡さなければなりませんし、当日渡すとなったら、もし遅れて会場に到着する人がいたら再入場の手続きをして一旦会場の外に出て、チケットを手渡しに行かなければなりませんでした。
プロ野球は平日夜の開催も多いので、仕事で遅れる人が多く、こうしたやり取りはなかなか面倒なものです。

QRコードのチケットだと、あらかじめメールやLINEを使って転送しておけば完結できるのです。
コンビニで発券したり、郵送してもらう際の手数料もかからなかったですし、球団側としてもQRコードのチケットを使ってもらうメリットは大きいのかなと感じました。

結局紙を発行するので、まだ改善の余地があると感じましたが、もっとQRコードのチケットが普及すれば、入場ゲートの端末にQRコードをかざして、というようにペーパーレスになるはずです。

私がよく行く千葉の野球場は、まだ紙のチケットしか対応していないのですが早く同じような仕組みが導入されて欲しいです。

パララックスデザイン

「パララックスデザイン」は、ウェブサイトに奥行きがあるような演出を加えたり、ウェブサイト内のパーツにアニメーションを加える手法全般の事を指し、「スクロールエフェクト」とも呼ばれます。「パララックス」は「視差」という意味です。

東進SEKAIラボ/スクロールすると写真と文字要素の動きに差異があり、奥行きがあるように見えるとともにタイトルが目に入りやすい動きになっています。

パララックスデザインは、見た目にも華やかなので、格好良く、面白く、ページの最後まで興味深く見てもらえるというメリットがあります。

MELANIE.F/デザインも動きも美しく気持ちの良いウェブサイトですが、文字のアニメーション処理に大量の画像データが読み込まれています。

1年ほど前までは、もっと派手な動きをするパララックスデザインのサイトも多かったのですが、モバイルファーストインデックス施行後はだいぶ少なくなりました。これはパーツごとへの動きを指定するプログラムが複雑化することによって読み込み速度が遅くなることに起因しています。

そういったデメリットを解決する、より軽量化された技術も日々更新されています。
ストーリーが感じられるような演出が必要なウェブサイトや、商品・サービスの特徴にマッチしている場合は、パララックスデザインも効果的です。

コピーライトとは?│Web用語集

コピーライト(copyright)とは、著作権と同じ意味です。
著作物を保護する権利のことで、著作権違反を犯せば罰金刑や懲役刑に処されることもあります。

コピーライトの対象物は音楽、映画、美術作品、写真などまで幅広く、Webサイトにも著作権が発生します。
Webサイトのフッター部によく「Copyright」の表記があるのはそのためです。

コピーライトについてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
Webサイトでコピーライトを主張する理由
復習クイズ

●他のサイトでの説明

コピーライトという言葉の意味が解説されています。
http://copyrights.livedoor.biz/archives/165755.html

Wikipediaには「著作権表示」という項目があります。
https://ja.wikipedia.org/wiki/著作権表示

ランガレウェブでも書き方について触れたことがあります。
https://web.landgarage.co.jp/2018/04/02/copywrightnotadasiikakikata/
 

●Webサイトでコピーライトを主張する理由

■無断転載を防止する
コピーライトの記載があることで、サイト内にある著作物には著作権があることをアピールできます。
無断でコピーをしたり、無断転載を防ぐ効果があります。

■誰に著作権があるのかを明らかにする
何も記載がないと誰に著作権があるのかわかりませんが、コピーライトを記載することで誰に著作権があるのかを明らかにすることができます。

■発行年を明らかにする
著作権が保護されるのは、著作者の死後50年までです。
発行年が記載されていれば、いつまで著作権が保護されるのかをアピールすることができます。

Webサイトにコピーライトの表記をすると、これらをわかりやすく伝えることができます。
ただし、記載がなかったからといって著作権が認められなくなるということはありません。
著作権は著作物を制作した時点で自動的に与えられるので、コピーライトの表記がなくても著作権は認められるのです。

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

ウェブサイトリニューアルで注意しておきたいこと

リニューアルをする際に、いくつか注意することがあります。
ウェブディレクターの仕事の現場で、よくお客様とお話をする内容を紹介します。

 

モバイルに対応していますか?

ウェブサイトが、スマートフォン(モバイル端末)に最適化したレイアウトになっていない場合、サイトを訪れたユーザーにとって情報を探しにくいなどストレスを感じさせている可能性があります。
Googleも「モバイルファーストインデックス(MFI)」という取り組みを進めています。MFIは、スマートフォン(モバイル)版ページのインデックスを優先するというものです。GoogleやYahooなどの検索エンジンに反映されることをインデックスと呼んでいます。
今後もモバイル端末を重視する動きは続いていくと考えられます。
PCとスマートフォンは、端末の特徴が異なりますので、対応されていない場合、早く対応されることをおすすめします。

 

コンテンツはユーザー目線ですか?

せっかくリニューアルをするのであれば、ウェブサイトに載せるコンテンツにもこだわりたいですね。
閲覧者が理解できる内容であるか?伝えたい情報であるか?など、社内で何度も構成をねるのも大切です。
ウェブサイトはデザインだけが良くても意味をなさないツールです。

最初から目標にする数値や結果を想定し、その目標に向け情報を整理するのは難しいと思います。
今現在、どのような課題があるのかを洗い出し、その中でも重要なことをいくつか解決するようにまとめていくと今回ご紹介した内容が自然と含まれているのではないでしょうか。

メルカリ体験

近年、注目を集めているフリマアプリの「メルカリ」。
おそらくこの記事を読んでくださっている方の中にも利用者はたくさんいるのではないでしょうか。

不要な物をネットで販売するとなると、これまではずっとYahoo!オークションが一強だったイメージで、例えば楽天が楽天オークションを運営していたことがありましたが、いつの間にかサービス終了となっていました。
それだけに、どうしてこんなにメルカリが流行り始めたのか疑問に思っていたのですけど、先日実際に出品をしてみたらその便利さに驚き、流行しているのにも納得させられました。

ゲームソフトを出品してみた

例えば、こちらのゲームソフトをメルカリで出品してみようと思います。
メルカリを起動して、出品ボタンをタップすると、まずは商品画像の撮影となるのですが…

なんと画像から商品を認識してくれるのです。

該当する商品がリストに表示されたら、それを選択すると…

それだけで必要最低限の商品情報が入力された状態になるのです。

しかも、商品のオススメ価格まで自動で入力されるので、相場を調べたりする必要もありません。
この手のサービスは商品情報の入力や価格の設定が面倒だったりするものですが、商品の写真撮影をするだけで商品を出品できる感覚なので本当に楽。
2~3分もあれば出品できてしまいます。

今回はゲームソフトを出品してみましたが、本なども画像認識で商品情報を入力してくれましたし、キーホルダーは商品の形状からキーホルダーと特定し、カテゴリの設定などを済ませてくれました。
また、画像認識できなかった商品も、バーコードを読み込ませて商品情報を入力させるということができます。

これだけ便利だと本当に気軽に出品できるので商品数が増えますし、他にも出品者や落札者が住所を伏せて発送をできる仕組みもできていたり、ネットで商品の売買をする際のデメリットをことごとく潰している印象を受けましたね。

ネットやアプリでのサービスを始めるとき、利用しやすさというのは本当に重要な要素なのだなあと改めて実感しました。

ウェブデザインは「ホワイトスペース」が決め手

要素が配置されていない空白のスペース部分のことを「ホワイトスペース」と呼びます。
ホワイトスペースと言っても、ただ白くて何もない箇所の事だけを指すのではなく、メイン被写体以外のスペースや黒い背景でも「ホワイトスペース」です。

参考:アップルのウェブサイト。iPhone X周囲の余白が大胆に確保され、嫌でも最新機種に釘付けになるデザインです。

ホワイトスペースの効果

・直感的にウェブサイトの要素を判別できる
ホワイトスペースを用いてウェブサイトの要素を最小限にすれば、伝えるべき情報がよりシンプルになります。

・文章の可読性が向上する
文字と文字の間のスペースや行と行の間のスペースもホワイトスペースです。文章量によって、ホワイトスペースの取り方を調整すると、より読みやすい文字組みをウェブサイトで組むことができます。

・洗練された印象を与えることができる
ホワイトスペースを大胆に使用したウェブデザインは必然的にシンプルになり、洗練された印象になります。

参考:大きく取られたナビゲーション上下のホワイトスペースによって、何も言わずに商品を見てほしいというメッセージが伝わってきます。

余白はデザインである

意図せずに生まれた余白はデザインではありませんが、意図的に作られた余白はデザインです。
余白がもたらす効果を正しく理解し意味を与えることができれば、よりユーザーの満足するウェブサイトを制作することができるのです。