デザインとアート

クライアントご担当者から「現代アートのような格好いいサイトが作りたい」とご相談を受けたことがあります。

私は、ウェブディレクターを介して
「誰をターゲットにしてどのような意図でどんな表現をしたいのか」
「どういった結果を出したいのか」
などの観点について議論を重ね、制作に取り掛かりました。

ところで、そもそもデザインとアートの違いとは何なのでしょうか?

【アートとは】
辞書で引くと、「人が知識とスキルによって物事を体現/具現化したもの」とありますが、これだけではデザインとの違いがはっきりしません。
アートは、制限のない表現と創造です。表現することそのものがアートですので、人に伝わる必要もありません。
人に伝わる必要がない独特な表現そのものが、制作者の狙いであることもあります。

アート参考:Barnett Newman「White Fire」

【デザインとは】
辞書で引くと、「ある目的を達成するための計画およびその計画をモデル化したもの」とあります。
前回の記事の通り、デザインとは問題を解決することで、目的と手段が人に伝わらなければなりません。

私は、
ウェブデザインの構成はロジカルであるべきという前提があっても、
あえて0から1を創り出すアートの表現を融合させたいという考えは、常に持ち合わせています。
それが、新しい何かを生むと思っています。
デザインとアートの違いは理解した上で、アートにおける複雑怪奇な表現手法も知っておいて損はないと思うのです。

直帰とは?│Web用語集

Webにおける直帰とは、一人のユーザーがWebサイトを開き、最初の1ページだけを見て他のページを見ずにサイトを離れたり、ブラウザを閉じたりすることをいいます。

例えば検索であるWebページを開いたとき、内容が思っていたものと違えばすぐに戻って別の検索結果を確認することになるでしょう。
この場合、開かれたページは直帰したページということになるのです。

また、ページの訪問数のうち、直帰した人が何%だったかを示す数値として「直帰率」という指標があります。
あるWebサイトのトップページに1日10回の訪問があり、そのうち6回が直帰していた場合の直帰率は60%です。

直帰率はWebサイトのアクセス解析をする際に重要な指標となります。
直帰率が高い場合はページの内容が充実していないか、次のページに移りにくい構成になっている可能性が考えられます。

また逆に、内容が充実していて1ページを見るだけで訪問者が満足した場合も直帰率が高くなりますが、その場合はページの滞在時間も長くなるはずです。

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

目次

他のサイトでの説明
直帰率の高いサイトにありがちな原因
復習クイズ

●他のサイトでの説明

Webにおける「直帰」についての説明です。
https://webtan.impress.co.jp/g/直帰

Googleアナリティクスの解説ページでも説明されています。
https://support.google.com/analytics/answer/1009409?hl=ja

直帰率が高くなることは必ずしも悪いこととは限りません。
https://web.landgarage.co.jp/2017/12/20/tyokkiritugennpagesuugenn/

 

●直帰率の高いサイトにありがちな原因

もし、運営しているWebサイトの直帰率が低い場合は、以下のような原因が潜んでいる可能性があります。

・ページの読み込みが遅い
ページを開くのに時間がかかりすぎると、待ちきれないユーザーは他のページに移ってしまいます。読み込み時間が1秒違うだけでもユーザーのストレスは段違いなのだそうです。

・ページタイトルや検索ワードとサイトの内容が異なる
極端な例ですが、「サッカーニュース」というサイトに野球のニュースばかり掲載されていたら、訪問者は間違いなく直帰してしまうでしょう。

・サイトの構成に問題がある
メニューがリンク切れしている、グロナビの位置や構成がわかりにくい、他のページへの導線がわかりにくい、というような問題があれば、ユーザーは他のページに移動できず直帰してしまうでしょう。

・ページが見づらい
文字サイズ、レイアウト、色など、デザインが悪くてページが見づらいと、内容が良くても記事を読む気がなくなり、直帰の原因になるはずです。

・そもそもコンテンツの魅力がない
内容が魅力的でなければ、訪問者が次のページを開くことはないでしょう。

・1ページで満足できるほどコンテンツが魅力的だった
逆に1ページだけで内容に満足した場合は、先のページに進まず直帰する可能性が高いです。

これらはWebサイトの回遊率が低くなる原因とよく似ています。

 

●復習クイズ

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

「フレーズ一致検索」を使ってみましょう

Google検索のコツはいろいろありますが、
知っておくと、普段の検索に役立つことに加えて
広告出稿する際にも使える知識があるので紹介します。

普段私たちがGoogleなどの検索エンジンを利用する際にはキーワードを入れます。
その際の検索方法は「部分一致検索」という方法が自動的に選択されています。

例えば、
『浦和の高校』」という検索すると

・浦和の高校
・浦和 高校
・浦和
・高校
が含まれる内容が表示されます。

文字通り、部分を切り出して検索されます。
検索してみたところ、約149万件が表示されました。

これ以外によく使われるのが
語順も含めて一致させる「フレーズ一致検索」です。
検索時に二重引用符(””)で囲って検索すると、そのキーワードに完全一致したものだけが検索されます。

フレーズ一致検索を使ってみる

『”浦和の高校”』と「フレーズ一致検索」をすると
「浦和の高校」という一連の言葉が入ったコンテンツのみが検索対象となります。
検索結果を見てみると約51,400件。とだいぶ絞り込まれました。

検索結果を見ても、
「浦和の高校」という一連のフレーズが入った結果が出ていますね。

どこで使うのか

たとえば、
商品型番がある製品で、使い方や修理方法を調べる時に、
型番だけを入れると、部分一致で結果が出過ぎてしまうことがあります。
そのときに「フレーズ一致検索」を使って型番が全部合うようにすると検索精度が上がります。

そのほか、ニュースや記事の元ネタはどこか、とか調べることもあります。
また、ウェブの仕事をしていたら、プログラムのエラー文言を調べる時に役立ちます。

使い方

このように””で囲って検索する方法とは別に、
検索フレーズを入力したあとに検索窓直下に出てくる「設定」から「検索オプション」をクリックして、指定することもできます。

その場合は、「語順も含めて完全一致」に入力すると前述の「フレーズ一致検索」と同じ結果になります。

広告出稿時

Googleで、Adwordsという広告を出す際は、
こちらも基本的には「部分一致検索」で設定がされます。
その際に「フレーズ一致検索」をうまくすると、広告のクリック率が上がります。

たとえば、私が、イチゴ狩りを宣伝することを想像してみます。
「埼玉のイチゴ狩り」で出稿すると
「埼玉」「イチゴ狩り」だけの検索キーワードに対しても広告が表示されてしまいます。
そのような場合に「フレーズ一致検索」が役に立ちます。

検索時にも広告出稿時に便利な「フレーズ一致検索」。
機会があったらぜひ使ってください。

ページビューを増やそうとして失敗した話

Webサイトのページビュー数(PV)とは、そのサイトが閲覧された回数を表していて、数値が大きいほどサイトがたくさん閲覧されているということになります。
PVに応じた広告掲載を収益としているサイトにとっては重要な数値です。
広告収益を得ていなくても、PVが多ければ影響力や拡散力のあるサイト、価値のあるサイトとしても見られるようになるでしょうし、紹介している商品やサービスが売れやすくもなるでしょう。
Webサイトはそもそも人に見られるために運営するものですから、ほとんどのWebサイトがPVの増加を目標のひとつにしているはずです。

ところが、PVを増やすためにとった策が、逆効果になってしまったという話を聞いたので紹介したいと思います。

あるネットニュースサイトの話なのですが、先日サイトをプチリニューアルして、1本の記事を1ページではなく数ページに分割して表示させるように変更したのです。
今までは1本の記事で1PVを稼いでいたのを、記事を分割することで1本の記事でも3PV、4PVと稼げるように考えたわけですね。
確かにこれがうまくいけば、同じ労力でPVが3倍、4倍と増えるのではないかと思えます。

しかし、読者にしてみれば何度もページを移動しなければならなくなり、とても不便な仕様になってしまいました。
その結果、なんと著しい読者離れを起こしてしまい、逆にPVが落ち込んでしまったのです。
PVが3倍、4倍になることを見込んでいたのに逆に減ってしまうなんて、相当数の読者が離れてしまったことが予想できます。

読者一人あたりのPV数を増やす方法はいろいろあるのですが、読者の数が減ってしまっては意味がありませんよね。
結局、面白いコンテンツを作り、見やすく使いやすいサイトにしていくことが最も重要なことなのだなと改めて思いました。

デザインとはロジックである

「デザイン」と聞くと、センスがどうとかクリエイティブがどうとか、何かただ見た目が良いものを作るようなイメージではないでしょうか?

ウェブデザインには、なぜそういったデザインなったのか全てに理由があり、良くないウェブデザインにはロジックがありません。良くない、というのはなぜそうしたかということが言葉で説明できないことを言います。
何を達成するためにどういった手段をとったのか。これを明確にできない制作物は、良くないと言われてしまっても仕方ありません。

この時ロジックという言葉を難しく捉えすぎる必要はなく、
例えば「なぜそのボタンは黄色なのか?」という問いに「全体のトーンマナーの対象色としての黄色で誘導を促したいからです」と言葉にできれば良いのです。
この言葉の積み重ねが制作のロジックになります。言い換えればロジックはコンセプトの一部であり、コンセプトはロジックの集合体だということになります。

では、センスやクリエイティブな視点が全く必要ではないのかというと、そういうことでもありません。
制作の目的を達成するために必要な要素ですし、視野が広ければ広いほど、目標を達成するための手段に幅をもたせることができます。
ウェブデザインにおけるセンスは、ターゲットに合わせたデザインを提供できるか否かということです。
センスは天性のものということではなく、前述のロジックに対する考え方や、一定の経験によって得られる技術なのです。

見た目の良さだけのウェブデザインは、ほんの一握りの分野でしか通用しないと私は思っています。
デザイン論のようで理屈っぽい話になってしまいましたが、知っておいてもらえると嬉しいです。

ウェブディレクターが使用するコミュニケーションツール

多くのウェブディレクター同様、
私も相手に合わせて使うツールを変えています。

大きく分けると
①テキスト・声・動画を主にやりとりする
②SNSとして、公開情報や一部公開情報を元にやりとりする
③プロジェクトを管理する
に分かれるのだと思います。

私が使っているコミュニケーションツールを挙げてみましょう。

電話、FAX、メール、LINE、Cybozu、Chatwork、Slack、Skype、Googleハングアウト、Zoom、Facebook、Instagram、Twitter、Eight、Googleドキュメント、Googleスプレッドシート、Backlog

改めて見ると、凄い数。
では、各ツールについて簡単に説明していきます。

まずは、「テキスト・声・画像・動画を主にやりとりするツール」。

電話・FAX・メール

なかでもメールが主流です。

LINE

2017年の決算資料によると、月に一回以上使う人は7,300万人だそうです。
https://scdn.line-apps.com/stf/linecorp/ja/ir/all/Q4_earningreleases_JP.pdf

社内チームで使われるケースもよく見かけます。
また、LINE社もビジネスツールとして「LINE WORKS」を出しています。

Cybozu

グループウェアと呼ばれる、チーム内での情報管理ツールです。
「Cybozu Live」「Cybozu」など、複数人で複数のことを管理するのに便利です。
掲示板・カレンダー・ファイルの共有・メッセージのやりとり・チャットなど

基本機能が一通り揃っているので使いやすいです。

一番ユーザー数が多い「Cybozu Live」は2018年4月にサービス終了しますので、
現在ほかのグループウェアが色々動いている印象です。

https://cybozu.co.jp/

Chatwork

ビジネスチャットツールとして、有名です。
やりとりの多いプロジェクトで力を発揮するツールだと思います。
ただ、チャットに特化していて過去の情報を少し調べづらいという印象があります。

https://go.chatwork.com/ja/

Slack

エンジニアが好んで使う印象があります。
理由としては、プログラムのソースコードの共有がしやすいことや、
他ツールとの連携が容易(プログラマーにとっては)ということが挙げられます。

最近広告展開もしていて、プログラマー以外での導入も進んでいるイメージです。
このツールのシェアは今後伸びる気がします。

https://slack.com/intl/ja-jp

Skype

こちらも知名度高いツールですね。チャット・ビデオチャット・画面共有が主な機能です。
今はMicrosoft傘下のサービスになりました。

https://www.skype.com/ja/

Googleハングアウト

Google提供のSkypeです。

https://hangouts.google.com/?hl=ja

Zoom

Skypeよりも動画が途切れないということで使う機会があります。

https://zoom.us/jp-jp/meetings.html

 

つぎは、「SNSとして、公開情報や一部公開情報を元にやりとりするツール」です。

facebook

ビジネス用ツール「facebook business」があります。
https://ja-jp.facebook.com/
https://ja-jp.facebook.com/business

Instagram

こちらも説明不要かと思いますが、facebookに買収されていることを知らない人が意外と多いです。
https://www.instagram.com/?hl=ja

Eight

「それさぁ、早く言ってよ〜」というセリフが有名なのはSansanですが、
そのサービスの個人版がEightです。どちらも最近よくCMを見ますね。
昨年あたりから名刺管理だけでなく、SNSとしても使えるようになったので、日本ではシェアがもっと伸びる気がします。
https://8card.net/

最後に「プロジェクトを管理するためのツール」です。

Googleドキュメント

一言でいえば、Wordのオンライン共有ツールです。
https://www.google.com/intl/ja_jp/docs/about/

Googleスプレッドシート

一言でいえば、Excelのオンライン共有ツールです。
https://www.google.com/intl/ja_jp/sheets/about/

Backlog

制作業界では案外使っている人が多いプロジェクト管理ツールです。
タスクの管理やスケジュール管理が優秀です。
https://backlog.com/ja/

ハードディスクのデータを完全削除する方法

先日、15年くらい前に使っていたパソコンに音楽のデータがたくさん入っていたことを思い出し、久々に起動してデータを移行できないか試してみました。
そのパソコンを前回起動したのは恐らく7~8年前。その時点でかなり動作が不安定であり、スペックも物足りなくなってきていて、新しいパソコンを購入してからは一度も起動したことがありませんでした。

久々にコンセントを挿し、ちゃんと動くかなと思いながら電源ボタンを押してみると……なんとまったく問題なく動作するではないですか。USBメモリを経由して無事に音楽ファイルを移行させることができました。

音楽データを移行できたのは良かったのですが、同時に「不要なデータはきちんと消さないと怖いな」と思いました。
使わなくなったパソコンをそのままゴミ捨て場に捨てる人はいないかもしれませんが、消したつもりのデータを復旧させる手段はたくさんあるようです。

ハードディスクのデータ復旧業者のWebサイトを見てみると「絶対にデータ復旧を成功させる」と豪語しているサイトがほとんど。
不要なファイルをゴミ箱に入れて削除したり、ハードディスクを初期化したり、リカバリー機能を使ってデータを削除したつもりでも、専門業者に頼めばデータを復旧させられるケースが多く、逆にデータを復旧するよりも完全削除することの方が難しいとも言われているそうです。

ではどのようにすればデータを完全削除できるのかと調べてみると、データの完全削除をするソフトや業者がたくさん出てきたのですが、その価格や作業費用はピンキリ。あまり安いと本当に完全削除できているのか、むしろデータを抜き出されたりしていないかと不安になってしまいますよね。

そこで、自分でデータの完全削除をする方法が書かれたサイトにも目を通してみたのですが、ハードディスクをハンマーなどで物理的に破壊するのがベストとするサイトがいくつかあって驚きました。
ハードディスクの中の円盤(プラッタ)が破壊されるとデータを復旧させることはほぼ不可能になるらしく、さらに水没もさせれば短時間で確実にデータを削除できるとのこと。厳密には削除ではなく、強引に読み出し不可能にさせているのですけどね。デジタルなデータを消すのに破壊するというアナログな方法がベストだというのは不思議な感じです。

パソコンの回収業者の大半がデータの削除もしてくれるようですが、万が一にもデータが流出してしまったらまずいハードディスクを処分する場合は、物理的な破壊も選択肢のひとつとして覚えておこうと思いました。

回遊率とは?│Web用語集

回遊率とは、一人のユーザーがひとつのWebサイト内のページをどれだけ閲覧したかを示す数値のことをいいます。

数値は「PV数/訪問数」で計算することができます。つまり1訪問あたりのページビュー数がそのまま回遊率ということになります。

回遊率が高いサイトは、訪問者がサイト内の複数ページに興味を持ちやすい内容になっているということ。サイト内の導線がしっかりしていたり、内容が充実しているということが考えられます。

例えばECサイトの場合は、一度の訪問で多くのページを見てもらえるほど商品購入の可能性が高まりますが、逆に回遊率が低ければ、あまり商品を見比べずにサイトを離脱していることになり、商品購入の可能性は低くなってしまうはず。

サイト構成が商品を探しにくかったり、購入画面に進みにくくなっていないか、そもそも商品の価格や種類が魅力的か、というように様々な面から見直しをして、回遊率をアップさせられるようにするべきでしょう。

また、サイトの内容によっては回遊率が低くなっても仕方ない場合もあります。

例えばハウツー系のサイトであれば、ユーザーが検索によって該当ページに辿り着き、必要な情報を得ることができればそれ以上ページを見ることはありません。閲覧者全員が1ページで満足して直帰していたら、回遊率も1ということになるので、逆に「回遊率の低さ=ユーザーの満足度が高い」と捉えても良いでしょう。

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

目次

他のサイトでの説明
回遊率の低いサイトにありがちな原因
復習クイズ

●他のサイトでの説明

用語の説明から回遊率を高めるテクニックまで書かれています。
https://ferret-plus.com/1069

Googleアナリティクスを使って回遊率を調べる方法が書かれています。
https://tuono034s.com/web-entry/1278/

回遊率の高いサイト、低いサイトの特徴が書かれています。
https://moriawase.net/page-views-per-visit

 

●回遊率の低いサイトにありがちな原因

もし、運営しているWebサイトの回遊率が低い場合は、以下のような原因が潜んでいる可能性があります。

・ページタイトルや検索ワードとサイトの内容が異なる
極端な例ですが、「サッカーニュース」というサイトに野球のニュースばかり掲載されていたら、訪問者はすぐ離脱してしまうはずです。

・サイトの構成に問題がある
メニューがリンク切れしている、グロナビの位置や構成がわかりにくい、他のページへの導線がわかりにくい、というような問題があると、他のページに移動せず離脱する人が多くなってしまうでしょう。

・ページが見づらい
文字サイズ、レイアウト、色など、デザインが悪くてページが見づらいと、内容が良くても記事を読む気がなくなってしまうものです。

・原稿がわかりにくい
漢字や専門用語が多すぎたり、内容が難しすぎたりしても、記事を読みにくくさせてしまいます。小学生向けの記事なのに、学者に向けたような論文を掲載していても読者を離脱させるだけでしょう。読者のターゲットに合わせた読みやすさを意識することが重要です。

・そもそもコンテンツの魅力がない
内容が魅力的でなければ、訪問者が次のページを開くことはないでしょう。

 

●復習クイズ

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

フォントの擬人化?なんだそりゃ

4月10日はフォントの日でした

4月10日はフォントの日でした。
ソフトウェアのアドビシステムズが「4(フォン)」「10(ト)」の語呂合わせで制定した日です。

そしてこの4月から、
フォントを擬人化した「フォント男子!」という漫画の連載を出版社のKADOKAWAがスタートしました。
フォント開発販売のモリサワが協力している企画です。

なんてニッチな層(デザイン系かつ少女漫画のようなテイストが好きな女性?)をターゲットにした漫画だろうと混乱したのですが、
それぞれのフォントデザインから受ける印象を擬人化・キャラクター付けすることでわかりやすく説明する、という試みには感心します。

ゴシックMB101

広告制作者に人気で、私が好きなフォントのひとつに、「ゴシックMB101」という定番のフォントがあります。
力強い骨格と、ゴシックでありながら風格のある佇まいのゴシックMB101は、媒体を問わずいろいろな場面で利用されています。

フォント男子のキャラクター紹介欄にはまだ登場していないゴシックMB101ですが、集合イラストの中のどなたかがゴシックMB101なのでしょうか…
私の感覚だと、力強く風格のある方はこの中にはいないような気がするのですが…

創英角ポップ体やHelvetica

フォント男子に登場しているのはもちろんモリサワのフォントだけですが、Windowsにプリインストールされている「創英角ポップ体」や、世界で一番美しいと言われている英文フォント「Helvetica」が擬人化されたらどういう容姿になるのでしょうね?

Illustratorとは?│Web用語集

Illustrator(イラストレーター)とは、Adobe社の画像編集ソフトのひとつです。
正式名称はAdobe Illustratorで、日本では「イラレ」という略称で親しまれています。

Adobeの画像編集ソフトは他にも「Photoshop」がありますが、PhotoshopとIllustratorの機能は密接に連携しているものの、まったく別のソフトであり、用途が大きく異なります。
※Illustratorの機能については、後半で説明します。

現在Illustratorのパッケージ版の販売は終了されていて、Adobe Creative Cloud(アドビ・クリエイティブ・クラウド)というサービスに登録している人・企業のみがダウンロードして使用することができます。
Adobe Creative Cloudの登録は有料で、Illustratorを使用できる最安プランは月額2,180円(単体プラン / 個人向け / 2018年4月現在)です。

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

目次

他のサイトでの説明
Illustratorでできること
Photoshopとの違い
復習クイズ

●他のサイトでの説明

Adobe社によるIllustratorの説明です。
https://www.adobe.com/jp/products/illustrator/beginner.html

WikipediaではIllustratorの歴史がわかりやすくまとめられています。
https://ja.wikipedia.org/wiki/Adobe_Illustrator

IllustratorとPhotoshopの違いについての解説です。
http://sitebk.com/photoshop/difference-of-photoshop-and-illustrator/

 

●Illustratorでできること

・イラストの作成
・オリジナルロゴの作成
・印刷物(ポスター、チラシ、名刺など)の作成
・文字のデザイン
・地図やグラフの作成
・アイコンの作成
・Webサイトのデザイン

など

 

●Photoshopとの違い

Photoshopは主に写真や画像を補正・加工するためのソフトであり、画像の色や質感の細かな調整を得意としていて、直感的に作業をできるのが特徴です。

一方Illustratorは「ベジェ曲線」で描いた「ベクター画像」を扱うソフトで、ベクター画像はどんなに拡大したり、変更を加えても画質が粗くならないという特徴があります。そのため、線や色のハッキリしたイラストの作成や、テキストの編集、レイアウトなどに適しているのです。

例えばポスターやチラシなどの印刷データを作成する場合は、Photoshopで写真を綺麗に加工し、Illustratorでレイアウトやテキストを仕上げる、というように2つのソフトを組み合わせることでより効果的に作業をすることができます。

 

●復習クイズ

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

「チラシやパンフレットも重要ですよ」

私の肩書きはウェブディレクターですが、
お客様には、「チラシやパンフレットも重要ですよ」と言うことがよくあります。

チラシやパンフレットを配ることでウェブアクセスを増やす効果もあります。
ウェブ広告より費用対効果が高いこともありますから、常に比較が必要です。

統計データを見る

総務省の情報通信白書の平成29年版にによると、
2016年の時点でのインターネットの人口普及率は83.5%ということで、
日本でインターネットを使っていない人は2500万人以上いるのです。

(出典)総務省「通信利用動向調査」

もう少し属性を絞ると

年齢別だと60歳を境に利用率が下がっています。
また、世帯年収によっても利用率が大きく変わります。

(出典)総務省「通信利用動向調査」

このような統計調査を見て、紙とウェブのどちらに重きをおくか、という判断材料にすることもあります。

自社パンフレット

先日、自社パンフレットのデザインが新しくなり、
デザインも気に入っていたので、親に送りました。
10年を超える社会人生活ではじめて親に自分の仕事をちゃんと伝えた気がしました。

会社案内パンフレットというのはお客様や、採用のために作ることが多いのですが、
今在籍している社員に対して改めて会社の方向性を示したり、働くスタッフの家族への説明・安心材料となったり、
副次的な効果もいろいろあるのだということを再認識する良い機会となりました。

ランガレウェブと銘打っていますが、紙のデザインや動画制作もしていますので、
まずは気軽にご相談くさい。

エイプリルフールのジョークサイト

毎年4月1日は嘘をついても良いという「エイプリルフール」として知られていますが、近年ではさまざまな企業サイトがウソの商品発表をしたり、冗談のニュースを報道したりと、ジョークコンテンツを公開するのがブームとなっています。
面白いネタを発信したサイトはSNSで拡散もされますし、知名度を上げる効果も大きいのでしょう。

今年のエイプリルフールもたくさんのWebサイトや公式SNSでジョークコンテンツが公開されました。
例えば有名な飲食チェーン店では……

■ジョナサン 店名変更のお知らせ

■吉野家 牛丼販売終了のお知らせ

殺虫剤でお馴染みの「アース製薬」ではこんな新製品開発のジョークが。

■アース製薬「お風呂できのこ栽培」
https://www.earth.jp/rakuhapi/aprilfools/
カビを防ぐ研究から生まれた逆転の発想、とのことです。

そして、Web関係者なら誰もがお世話になっている「Adobe」までもがこんなジョークを。

■Adobe「飲むフォトショップ」
https://blogs.adobe.com/creativestation/aprilfools_2018
理想の体へ即効レタッチ、というキャッチコピーがバカバカしくて良いです。

ただ、こういったエイプリルフールのジョークサイトをまとめたページもチェックしてみたのですが、例年と比べると全体的に無難なネタが多いと感じたのも事実。

今年のエイプリルフールが日曜日と重なったため、尖ったネタを投下して休日のうちに炎上してしまうのを恐れた企業が多かったのでしょうか。

そんな中で、今年のジョークサイトの中で個人的に最も好きだったのがこちら。

■オリックス・バファローズ 金子投手がJリーグに移籍

プロ野球のオリックス・バファローズ、Jリーグのセレッソ大阪、Bリーグの大阪エヴェッサという異なるプロスポーツチーム3チーム間でトレードを行うというネタなのですが、エイプリルフールのために同じ地域のプロスポーツチームがわざわざ協力し合っているというバカバカしさが素敵だなあと思いました。

僕はかれこれ10年近くWebの仕事に携わっていますが、残念ながらまだ一度もエイプリルフールのページに携われたことがありません。
いつか企画段階から携わって、くだらないネタを考えて、それを実現させることができたらいいなあ、なんてこっそり思っています。

モバイル版ウェブサイト制作上の注意点

モバイルファーストインデックスの運用開始によって、よりモバイルサイトを充実させていかなければならないと書きました。
モバイルサイトは、パソコンサイトには無い制作上の注意点があります。

縦方向に長過ぎないように

パソコンサイトをモバイルに対応させた場合、ウェブサイト自体がとても縦長になって、
閲覧するのに延々とスクロールしないといけないようになっていませんか?

コンテンツ量が多いと、
見出しから離れて現在地がどこだかわからなくなったり、
長すぎて途中で読むのを止めてしまうなどの危険性があります。

折りたたみ機能をつけたり、ちょうどよい部分でページ遷移させたりするなど、
情報の配置と読ませる為の工夫はパソコンサイト以上に気にする必要があります。

動画やアニメーションに細心の注意を

パソコンサイトのトップページで使用している自動再生型の動画は、
モバイルサイトでは通信環境の制限もあるので、できるだけ控えたほうが良いでしょう。
代替の画像を用意して、パソコンとモバイルの表示を切り替えるのが一般的です。

パソコンサイトでスクロールに応じたアニメーションを使用している場合も、
モバイルサイトではアニメーション処理によって読み込みや処理が遅くなっていないか確認しましょう。

文字サイズは慎重に選ぶべき

文字サイズが大きいから読みやすいわけではありません。
原稿ボリュームが多いモバイルサイトでは、改行が多くて読みづらくならないように小さめの文字サイズを選んだほうが良いでしょう。原稿ボリュームが少ないければ大きめで良いと思います。

指で操作しやすいインターフェイスデザインを忘れずに

モバイルサイトを閲覧する時のユーザーの基本行動は、指一本でメニューアイコンやリンクを触る「タップ」と、指一本で触れたまま上下左右に指を滑らせる「スワイプ」です。
これらの動作がストレスなく行えるボタンやリンクのサイズになっていますか?

レスポンシブとは?│Web用語集

Webにおける「レスポンシブ(Responsive)」とは、レスポンシブWebデザインのことを指します。
レスポンシブWebデザインとは、PC、スマートフォン、タブレットなど、画面サイズの異なるデバイスに合わせて表示を調整し、最適化した表示にするWebデザインです。

従来、スマートフォンサイトを制作する場合は、PC用のサイトとスマートフォン向けのサイトと、それぞれのデータを用意するのが一般的でした。

例えば、PCサイトとスマートフォンサイトのURLが、

http://www.xxxxxx.co.jp/
http://www.xxxxxx.co.jp/sp/

というように違うものになっていることがありますが、これはレスポンシブWebデザインを採用していないため、2サイト分のデータを用意しているということになります。

ランガレウェブはレスポンシブ対応をしているため、PCで表示しても、スマートフォンで表示しても、URLが同じになります。

また、PCでランガレウェブを表示し、画面の横幅を広げたり縮めたりしてみると、横幅に合わせてページのレイアウトが変わることが確認できるはずです。
この動作をすることで、WebサイトにレスポンシブWebデザインが導入されているかどうかを確認することができます。

レスポンシブWebデザインについてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
レスポンシブWebデザインを採用する主なメリット
復習クイズ

●他のサイトでの説明

質問に回答する形式でレスポンシブについて解説しています。
https://www.crosswish.com/faq/592/

初心者に向けた解説と、メリット・デメリットまで紹介されています。
https://ferret-plus.com/2633

少し専門的な解説のページです。
http://e-words.jp/w/レスポンシブデザイン.html

 

●レスポンシブWebデザインを採用する主なメリット

■Webサイトの管理が簡単になる
レスポンシブWebデザインを採用したサイトを更新する場合、同一のファイルを更新するだけでPCサイト、スマホサイト、タブレットサイトと一括で変更することができます。
従来のWebサイトはそれぞれのサイトが独立しているため、PC、スマホ、タブレット用のサイトがある場合は、3つのファイルを更新しなければなりません。
また、複数ファイルを更新しなければならないため、入力ミスでデータに相違が生まれるなどのトラブルが起こりやすくなってしまいます。

■GoogleがレスポンシブWebデザインを推奨している
検索サイトのGoogleがレスポンシブWebデザインを推奨していて、なおかつ「モバイルファーストインデックス」の運用が始まったという点も、レスポンシブWebデザインを採用する大きなメリットとなります。
ものすごく簡単に言ってしまうと、モバイル端末でのWebサイトの見やすさが検索順位に大きく影響するようになったため、Googleが推奨するレスポンシブWebデザインを採用しておけば、SEO的にも大きなメリットがあるということです。

もちろん、レスポンシブWebデザインを採用することによってデザインの自由度が下がるなどのデメリットもありますが、どんなに秀逸なデザインのサイトでも見てもらえなければ意味がありません。
まだレスポンシブWebデザインを採用していないWebサイトを運用している方は、ぜひ導入を検討してみてください。

 

●復習クイズ

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

ウェブページが表示される仕組み

前回「パワーズオブテン」という動画を見ると、物事の把握をしやすくなるということを書きました。

今回はウェブページとブラウザとパソコンの関係についてざっくりと説明します。

普段私たちがウェブサイトを見るときには、
ブラウザと呼ばれるアプリケーションを起動し、
アプリケーション内で表示された部分をウェブページとして認識してみています。

ウェブページの中身は基本的には
HTMLとCSSとJavaScriptという言語を組み合わせて作成・表示されています。

HTMLとCSSとJavaScriptの役割について

よくある説明だと、
HTMLはサイトの構造や文章を記述
CSSはデザイン・配置を制御するために使用
JavaScriptは動きを操作
となります。

この3つの機能を図にすると下記のようなイメージになります。

並列ではなく、JavaScriptにHTMLとCSSが内包されるというところがポイントです。

JavaScriptではウェブページの一つ上の枠組みである、ブラウザそのものを操作できます。
厳密には全部を操作できるわけではありませんが、
ブラウザの操作である
・ブックマークへの追加
・ブラウザサイズの変更
・HTMLやCSSの書き換え
なども行えます。

ただ、JavaScriptもブラウザの操作までしかできないので、
ブラウザのもうひとつ上であるOSそのものを変更することはできません。

OSはオペレーションシステムの略称でWindowsやMacintoshなどが代表的なOSです。
OSは詳しく説明する必要もないと思いますが、ブラウザを含む各種アプリケーションを操作・管理しています。

では、OSであるWindowsを作っているものはなんなのかというと、
基本的にはC言語とまたそこから派生した言語から作られています。

ではどのような言語でOSを作るのかといったら、機械語と呼ばれる、
コンピュータの処理機能を持つプロセッサに直接命令を書くプログラムです。

まるでマトリョーシカのように親子構造になって動いているのです。

話が飛んでいるようですが、
今までの話を前回のブログとつなげて考えると、

発電所の稼働⇔ブレーカーの動作⇔家電
という部分が
プロセッサの処理⇔機械語による処理⇔OSによる処理⇔ブラウザ(アプリケーション)による処理⇔ウェブページの表示
となるわけです。

ウェブページが表示されるまでには、いろいろな処理や役割分担があるということをなんとなくわかっていただきましたか?

今回はパソコンの処理部分にフォーカスしましたが、インターネット通信についても同じように階層構造でできているんです。
もう少し難しくなりますが、興味がある方は「TCP/IP」という言葉で検索してみてください。

以上、説明のためにざっくりとした書き方になっていますが、
ご指摘などありましたら気兼ねなくお問い合わせください。

 

「コピーライト」の正しい書き方、わかりますか?

Webサイトのフッター部分に記載されていることの多い「コピーライト」の表記。いわゆる著作権表示のことなのですが、皆さんはこの正しい書き方をご存知でしょうか?

先日、制作中のWebサイトにもコピーライトを入れる際に、いろいろなWebサイトを確認してみたのですが、サイトによって表記の仕方がバラバラなのですよね。

例えばYahoo!Japan、Twitter、楽天市場、ZOZOTOWNの4サイトのコピーライトを見てみると、以下のようになっていました。※2018年4月2日現在

Yahoo! Japan
『Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.』

Twitter
『(C) 2018 Twitter』

楽天市場
『(C) Rakuten, Inc.』

ZOZOTOWN
『COPYRIGHT (C) START TODAY CO.,LTD. ALL RIGHTS RESERVED.』

年号が入っていたりなかったり、「All Rights Reserved.」の表記もあったりなかったり、社名こそ共通で入っているものの順番がそれぞれ異なります。大手サイトにならえば間違いないだろうと思いきや、大手サイトでもバラバラなのですから、何が正解なのかさっぱりわかりません。

この機会に調べてみたところ、実はすごくシンプルな表記で大丈夫なようです。

書いておきたい要素。

・ 『Copyright』『(C)』『○の中にCのマーク』のうち、ひとつが入っていればOK。Yahoo! JapanもZOZOTOWNも『Copyright』と『(C)』が併用されていますが、これは重複していることになってしまうのです。

・ 年号は入れたほうが良いのですが、入れるのは著作物の発行年号、つまりサイトを公開した年を入れておけばいいとのこと。『2010-2018』というように、公開した年と更新した年を入れているサイトも見かけますが、この場合は『2010』だけで十分なのです。

・著作権所有者の氏名。企業の名前やWebサイト名が入っていればOKです。

この3つの要素が入っていればWebサイトのコピーライトとして成立するそうで、『All Rights Reserved.』の表記は不要とのことでした。

例えば、「ランガレウェブ」のコピーライト表記は2018年4月現在、『Copyright (C) 2017 ランガレウェブ All Rights Reserved.』となっていますが、

『(C) 2017 ランガレウェブ』

ここまで簡略化しても問題ないということに。だいぶスッキリしますよね。順番も特に決まりはないようです。

ただし日本の法律では、著作物には自動的に著作権が発生することになっているため、コピーライトの表記がなくても著作権の主張ができるそうです。

また、『Copyright』と『(C)』が重複していても、『All Rights Reserved.』の表記があっても、まどろっこしいだけで間違いということでもないようです。

もし「コピーライト」を入れるのなら、ここまでスッキリさせることができるよ、ということで覚えておいて損はないのではないでしょうか。