ウェブデザインの流行

ウェブデザインの流行

アメリカのSNSで、世界中のデザイナーに人気のdribbble(ドリブル)で、2009年から2017年までのウェブサイトにおけるボタンデザインの傾向がまとめられていました。
https://dribbble.com/shots/3803756-Buttons-Design-over-the-Years-The-Dribbble-Timeline

流行り廃(すた)りにとらわれず、使いやすいデザインを提供したいというのは制作者であれば誰でも持っている考え方ですが、ウェブデザインの流行は、ユーザーにとっての使いやすさと密接に関係しています。

ユーザーはウェブサイトを閲覧する前に、OS(オペレーティング・システム)のデザインに触れます。パソコンならWindowsやMac OS、スマホならiOSやAndroidなどです。

ユーザーはパソコンやスマホのOSに触れて、どういうデザインがどういう機能を持っているのかを体験して学んでいきます。「慣れ」ですね。
ですから、ウェブサイトデザインは、OSのデザインに近いほうが、余計な混乱を招かずに済みます。
dribbble(ドリブル)で紹介されている各年のボタンデザインのテイストは、その年に代表されるOSのデザインの傾向に沿ったものになっているのです。

もちろんすべてのケースで単にOSに似せたデザインにすれば良いということではありませんが、ウェブサイトのリニューアルの際などは現状のデザインが「今も本当に使いやすいのか」ということを見直すひとつの指標として、今回の話を参考にしていただけると嬉しいです。

〈前編〉Amazonで90%offの商品を探す方法を知るついでに知っておきたいこと

〈前編〉Amazonで90%offの商品を探す方法を知るついでに知っておきたいこと

旅先の宿を予約する時は最安値のサイトを探す。居酒屋を予約する時は他よりいい条件のクーポンを探す。ということはこのブログを読んで頂いている方ならすでに実施されていると思います。

今回はAmazon.co.jpでのお得な検索方法をお伝えします。
お得な情報を知られた、というだけではこのブログの意味がないので、もう一歩知るところまで行ってみましょう。

1.アマゾンにアクセス

2.カテゴリを選択

3.URLの末尾に
「&pct-off=90-」という文字列を追加してください。

4.なんと90%OFFの商品一覧が出てきます。
18,500円のカオナシ風衣装セットががなんと780円!!
定価は本当に定価なのか、という疑問もありますが安いのは間違いありません。他のカテゴリを見ると10,000円の財布が60円というものもありました。
マーケットプレイスでの購入の場合は、出品者情報や評価をしっかり見た方が良いですので、その点はご注意ください。

ここまでだとただのお得情報になってしまうので、もう少し見ていきましょう。
今回挿入した「&pct-off=90-」という文字列。暗号に見えますが、よく見てみると
pct-offと90という文字列は90percent-off、90%OFFと読み解くことができます。
では、数字の90を80に変えると、、

ジャン!80%OFF以上の商品一覧が出てきます。
アマゾンでは共通のルールですので、他のカテゴリもぜひ見て見ましょう。
DVDカテゴリが機能していなかったのは残念です。TVゲームカテゴリは30代・40代の方なら胸が熱くなるはず。

普段サイトを見るだけだと、URLをチェックする機会は少ないと思いますが、
URLを見ていると制作側の視点も見えるので面白いですよ。
長いURLは魔法の文字列に見えますが、意味のないURLはないのです。

その点次回、少しだけ説明したいと思います。
ちなみに、今回面倒くさいことしましたが、下記のようなサイトからアクセスすると簡単ですので、ぜひご覧ください。

OffzonーAmazonの裏ワザで90%Offの商品を簡単検索
http://offzon.nog.cc/

後編へ続く(10月4日配信予定)

ランガレウェブについては、こちらをご覧ください。

締切直前にTwitterをやってる作家は許せないですか?

締切直前にTwitterをやってる作家は許せないですか?

僕はウェブ制作の業務のほかに、イラスト制作の仕事や編集の仕事もしているのですが、先日知り合いの漫画家さんがTwitterに投稿した内容がネットで話題となっていました。

どんな投稿だったのかというと、その漫画家さんがいろいろな業界の編集者が集う会に参加し、編集者たちに「作家に本気でムカついたことはあるか?」と尋ねてみたところ、ほぼ全員が「締切がヤバいのにTwitterをやってる奴は本気で腹が立つ」と回答したというもの。

編集者にしてみれば「締切がヤバいのに原稿を進めずTwitterとは何事だ」と思うのでしょうが、作家にしてみれば「Twitterに投稿する数十秒も許してもらえないのか」と思うわけです。作家がTwitterまで監視され、いちいち行動に文句を言われたら自由がなくなってしまいそうですし、でも逆に締切がヤバい状況になっている作家さんにも問題があるとも言えるので、善し悪しを決めるのは難しい問題だとは思います。

今回は作家と編集者の例が話題となっていましたが、これは割といろいろなシチュエーションにそのまま置き換えられますよね。パートナー企業の担当さんに頼んだ仕事が遅れているのに本人のSNSを見たら連日のように飲み会の写真を投稿していたり、週末に遊びまくっている写真をSNSに投稿していた社員が月曜日に体調不良で欠勤したりしても、仕事を依頼している側にしてみれば腹立たしく思ってしまうでしょう。

個人的には一緒に仕事をする関係の人とSNSで繋がることで、相手のプライベートな部分を知れて親密になれるのは大きなメリットだと思いますし、逆にいろいろな人に見られているから締切などの約束事は最低限守ろうとプレッシャーをかけるようにしています。

ランガレウェブについては、こちらをご覧ください。

 

 

iPhone X発表を受けて

iPhone X発表を受けて

iPhone Xが公式に発表されました。iPhone 6を洗濯していなければ、この発表を待って私もiPhone 8もしくはiPhone Xに機種変更するはずだったのですが…悔しいです。

そんな話はいいとして、私たちは、iPhoneのアップデートに伴う画面サイズや解像度の変更に伴うWebサイト制作への影響を考えてしまいます。

こちらにiPhoneXの仕様が載っています。

iPhone Xでは、これまでの機種に比べてディスプレイが縦に長くなり、かつ画面上部の真ん中にカメラ等が配置されたことによる出っ張りができました。これにより画面全体を覆うようなフルスクリーン表示のデザインが崩れたり、画面上部に配置されたボタンがさらに押しづらくなるなどの問題が出てきます。
また、ディスプレイ解像度の変更によって、パソコンで表示する3倍の大きさの画像を用意しておかないと画像が綺麗に表示されません。
このように、表示端末の仕様の変化は、Webサイト制作において大きな影響をもたらします。

おそらく売れ筋は今まで通りの4.7インチサイズのiPhone 8ということになり、スマートフォン版ウェブサイトのiPhone Xへの対応は直近では限定的なものになると思います。iPhone以外の他の端末もこのような仕様に追随してくることも予想されますので、動向は注視していきたいと思います。

ランガレウェブについては、こちらをご覧ください。

 

毎年開催するイベントのURLはどうするべきか?

毎年開催するイベントのURLはどうするべきか?

クイズです!

Q 毎年開催するイベントのURLは下記のどちらにすべきでしょ〜か?

A 毎年変える
B URLは変えずに内容を上書きする。

興味がありましたら下記画面からクイズご参加ください。
クイズに参加されると、集計結果をご覧いただけます。
メールなど個人情報の収集はしておりませんので、ご安心ください。

参加しない方はそのままスクロールして答えをご確認ください。

答えは、、、、

 

 

【B】URLは変えずに内容を上書きする。

でした。

理由は下記の通り
・毎年更新すると、イベント名で検索すると去年以前のイベントが検索結果のトップに出てきてしまう可能性があるから。

では、今年作ったページは来年どうすべきかというと
・アーカイブ(過去)ページを作る。

毎年開催するイベントといえば、ロックフェスですね。
では日本3大ロックフェス(勝手に決めました)のサイトをみてみましょう。

フジロック・フェスティバル
アーカイブページはhistoryというページの中に入っていますね。

ロック・イン・ジャパン・フェスティバル
アーカイブページは年度ごとに分けられていました。

サマーソニック
このサイトは少し違う作り方をしていて、上記URLにアクセスすると強制的に現在の年のページに飛ばされます。
これは、リダイレクトという処理です。最初からアーカイブページのURLで作っておいて、転送してしまうという方法をとっているようです。

これらの方法についてはGoogleのJohn Muellerさんが説明しているページ(英語)があるのでご参考まで。
https://plus.google.com/+JohnMueller/posts/WyAoPsh4GNW

ちなみに私、偉そうにフェスの事説明していますが、どれも行った事ありません。

ランガレウェブについては、こちらをご覧ください。

iPhoneでPC版のウェブサイトを見る方法

iPhoneでPC版のウェブサイトを見る方法

最近は、とても多くのウェブサイトがスマホ対応されていて、スマホでもスッキリと見やすいデザインで表示されます。ランガレウェブでもスマホ対応のウェブサイト制作をお勧めしていますし、実際にお請けすることが多いです。
一方で、閲覧者側に立てばパソコンで見慣れているページをそのまま見たいという時もあります。スマホ用のすっきりした表示もいいのだが、見たい情報が探しにくい場合もあるわけです。

そこで、もしスマホでパソコン版のページを表示させたい場合の方法をご紹介します。
ページ内に「PC版はこちら」「PCモード」と言うようなボタンが設置されていたらそちらをタップすればパソコン版の表示に切り替えることができるはずですが、そうではない場合はどうすればいいのか。

もし利用しているスマホがiPhoneであれば、強制的にパソコン版の表示に切り替えさせる方法があります。インターネットブラウザのSafariを使用し、URLを入力する欄の右端にあるリロードボタンを長押ししてみましょう。

すると画面に「デスクトップ用サイトを表示」というボタンが表示されるので、続いてこちらもタップします。

画面がすぐにパソコン版に切り替わるはずです。大抵のページでは文字がかなり小さくなり、そのままでは見にくいと思いますが、画面を横回転させたり拡大させたりすれば、多少は見やすくなるでしょう。

そもそもの話ですが、スマホ用のページはスマホの小さい画面でも見やすいように作られるものなので、せっかくスマホ版のページを作ったのに見にくくなってしまっては本末転倒。スマホ版のページを作る際には、見やすく使いやすいページになっているかを常に注意しながら作業を進めなければならないのです。

ランガレウェブについては、こちらをご覧ください。

フィンテックに注目

フィンテックに注目

1か月ほど前に、iPhone 6をポケットに入れたまま洗濯してしまい泣く泣くiPhone 7に機種変更したのですが、iPhone 7のApple PayやモバイルSuicaの便利さに驚いています。
Suica残高が減ると勝手にチャージしてくれる機能などは、急いでいるときにはとても重宝し、もうこれがないと不便を感じるほどになってしまいました。

こういったモバイル決済も含めて、フィンテックの分野のサービスが注目されています。
フィンテックとはファイナンスとテクノロジーのふたつを併せた造語です。ITを駆使することで金融をより身近なものにしよう…というもので、LINEやFacebook経由でお金を送金できるようになったり、指紋認証だけで店頭での支払いができるようになったりと、この分野の技術革新が進むと世の中がグッと便利になっていくのでしょうね。

話題になっているサービスの一部をご紹介したいと思いますが、どのサービスも斬新な切り口で、非常に興味深く見守っています。現金が絡むとどうしても構えてしまうというのが本音ですが、その「構え」がほぐれたとき、また新しい革新が起こるのかもしれませんね。

■CASH:まるでアプリ版質屋サービス。持ち物の写真を送ると評価額が査定され、納得したらその持ち物を送ると金額が支払われるそうです。
https://cash.jp/

■Payme:企業が従業員に給料を前払いできるサービス。もちろん会社がPaymeと契約しないと成り立ちませんが。
https://payme.tokyo/

■メルカリ:話題のフリマアプリ。画期的だと思うのは、個人間の取引の決済をメルカリが仲介するというところ。
https://www.mercari.com/jp/

 

チラシやDMからのアクセスを調べる方法

チラシやDMからのアクセスを調べる方法

誰もが毎日のように目にするイベント案内やセール情報などのチラシやはがき、ダイレクトメール。そこにはウェブサイトのURLをQRコードで表示されていることが多いと思います。
QRコードって意味があるのかな、とかQRコードを使っている人っているのかな、と思ったことありませんか?
もしあなたがその宣伝の担当者だったら、このQRコードにひと手間加えることで可能になる数値計測について知っておくといいと思うことをご案内します。

グーグルが提供しているサービスにURL短縮サービスがあります。
Google URL Shortener
この短縮URLを使うとアクセス情報の
・時間
・アクセス数
・ブラウザ
・OS
などの情報を計測することができるほか、QRコードの作成や結果の共有なども簡単にできてしまうんです。
といっても想像しづらいですよね。下記、計測結果画面を公開しますので(※1)参考までにページをご覧ください。

https://goo.gl/#analytics/goo.gl/NRP3i3/all_time ①

結果画面を見た後に、下記短縮URLをクリックしてみてください。
リンク先はランガレWEBのトップページです。

https://goo.gl/NRP3i3 ②

そのあとに再び①のURLの結果画面を見ると数値が1つ増えているはずです。

上記URLをQRコード化したものが下記になります。

これをスマートフォン等でQRコード読み込みしてみると、
当たり前ですが、数値がもう1つ増えます。

これ、便利だと思いませんか?
ということで、印刷物にQRコードを入れるときに是非活用してください。

一度使って見ると、下記のように気になることが出てくると思います。
・DMごとのクリック率を知りたい。
・配布エリアによってのクリック率を知りたい。
・サイトに訪れた後にお問い合わせした割合をしりたい。

上記のような複雑な計測をしたい場合は、プロにご相談ください。

※1 本当は、管理画面の画像を貼りたかったのですが、Google関連の管理画面をスクリーンショットして、web上に公開するのはGoogle規約違反になるため、リンクの設置としました。

ランガレウェブについては、こちらをご覧ください。

SNSで検索

SNSで検索

インターネット検索は、いつもGoogleやYahoo!という人は多いと思います。
でも、検索にはいろいろなテクニックがあって、上手に使えると必要な情報を探しやすくなったりしますし、SNSを使った検索も使い方によってはすごく便利です。

Twitterはたくさんの人が投稿したい時にすぐ投稿をする特徴があるので、「今起こっていること」を調べるのに最適です。
乗ろうとしていた電車が急に止まってしまった場合などは、現地に居合わせている人のTwitterの投稿を見つけ出せば、ニュースよりも早く復旧の見込みが掴めたりします。
行こうと思っているお店の混雑状況を調べたり、イベント会場での有名人の目撃情報を調べたりもできるでしょう。ニュースや発表した商品の反応を調べるのにも便利ですね。

Instagramではたくさんの写真が投稿されているので、旅行先の下調べをするのに向いています。
京都へ旅行することになったとしたら、位置情報やハッシュタグを使って京都の写真を検索すれば、ずらりと並んだ京都関連の写真から行ってみたい場所を見つけられるかもしれません。
食べログなどのグルメサイトに掲載されていない飲食店も、Instagramで検索すると料理の写真がたくさん見つかるということも良くあります。

Facebookも近くで開催されているイベントを探したりできるので、上手に使えば休日の選択肢が増えるかもしれません。

SNSでは、通常のインターネット検索とは異なる、それぞれの特性を活かした検索ができます。
それこそ、検索のコツ的なものを検索してみるといろいろな方法が紹介されていますよ。

ランガレウェブについては、こちらをご覧ください。

フリー素材

フリー素材

写真やイラストを無料で提供するフリー素材サイトが随分増えました。
素材そのものの質は申し分ないものも増えてきましたが、今回はフリー素材を使用する際に気をつけたいことをご紹介致します。

フリー素材のデメリットとしては、
・イメージに合うものがない、見つけづらい
・同じ画像が他社で利用されていて、かぶってしまう場合がある
・フリー素材と思われるものでも著作権があるものがあり、知らないうちに著作権侵害をしてしまう
などがあります。

実際に聞いたことのある事例もいくつかあります。

サイトリニューアルに際して、コストを抑える為にフリー素材ばかりで構成したら、商品に対する信頼が得られず、問い合わせ・売上が減ってしまった。胡散臭いデザインに見られてしまったようです。

使用したフリー素材が反社会的勢力のサイトでも使用されていて、取引先から関係を問われたり、お客様から苦情がきてしまった。

最近増えているそうですが、フリー素材だと思っていたものの著作権が実は放棄されておらず、多額の費用を請求されてしまったという話もあります。

とはいっても、便利なのには違いありません。
フリー素材というと、一般の方は写真やイラストをイメージされると思いますが、その他にも音楽素材、映像素材、映像編集に便利なトランジション素材などいろいろあります。

上記のようなリスクに気を付けて、上手に使いましょう。

ランガレウェブについては、こちらをご覧ください。

WEBプッシュ通知を入れてみた

WEBプッシュ通知を入れてみた

ニュースやメール、LINEのメッセージなど、日常的に届くプッシュ通知。

WEBサイト運営者にとっては、一度承認してもらえたらお客様にこちらから通知ができることは、とても良いことです。

見る側にとっても、LINEのニュース、Facebookのメッセージやグーグルカレンダーの予定通知など、自分がアプリを起動していなくても、通知が届くのは便利ですし、興味を持ったWEBサイトの新情報をいち早くキャッチしたい方もいると思います。

スマホでは当たり前になっているプッシュ通知ですが、パソコンでも同じ機能があるのをご存知でしょうか?
気になっているサイトがプッシュ通知を実装していたら、一度登録すれば、あとはブラウザを立ち上げておけば、発信者側の通知が届きます。定期的に情報をチェックしているサイトがあるなら便利です。

ランガレWEBでも試しに設定してみました。今回は、iZootoというサービスの無料プランで試しています。
トップページにアクセスすると、ページ右下に「更新情報をご希望の方は〜」という灰色のボックスが出てくるので、「OK」をクリックすると登録完了です。一度iZootoの画面が表示されてしまうので、人によっては不信感を持たれてしまうのでは、ということは感じました。

一度ご登録いただくと、設定したタイミングで、通知が届くようになります。

WEBプッシュ通知画面

管理画面を見ると、登録数・表示数・クリック率などが表示されます。

メールマガジンのような強力なツールではありませんが、再訪率を高めてくれるツールとして補助的に使うのが良いのかな、というのが現時点の感想です。

ブラウザによって表示されたりされなかったりという状況で、まだ一般化されているとは言えない「WEBプッシュ通知」ですが、しばらく色々試して見たいと思います。

ランガレウェブについては、こちらをご覧ください。

インスタ映え

インスタ映え

mixiから始まった日本のSNSブームですが、現在最もホットなSNSと言えばInstagram(インスタグラム)でしょう。
「インスタ」の愛称で親しまれているインスタグラムは、写真の投稿がメインのSNS。美味しそうな料理や見事な景色、可愛く撮れた自分の写真など、投稿したら話題になりそうな写真のことは“インスタ映え”する写真と呼ばれるようになり、若い世代を中心にインスタ映えする写真の撮影に躍起になる人がすごく多くなっているようです。

僕もインスタグラムを利用していますが、やっぱりせっかく写真を投稿するなら少しでも綺麗に撮りたいと考えてしまいますし、いつもよりも多く「いいね」が集まれば嬉しいものです。でもあまりに夢中になりすぎて、本末転倒になってしまっては意味がないですよね。

例えば今年の夏は、遊園地のプールで写真ばかりを撮影して、プールの中には全然入らないという女子も多かったそうですが、その理由はプールの中に入ってしまうとメイクが落ちてしまうからだと言うのですから驚きました。プールに入ることよりも、インスタ映えする写真を撮ることの方がメインの目的になってしまっているのです。

また、外でごはんを食べると僕もつい写真を撮ってしまいますが、少しでも美味しそうに撮影したいと思う反面、早く食べないとどんどん料理が冷めちゃうなとも思います。インスタに夢中になっている人は、どんなに料理が冷めようとも納得がいくまで写真を撮り続けるのかもしれません。

こんな感じでインスタブームが続くと、そのうち全然美味しくないけどインスタ映えする料理なんかも流行り始めてしまうのではないでしょうか。昨今のインスタブームを見て、ブームに乗りすぎるのも怖いなあと思ったりしています。

 

ウェブサイト制作の質の変化

ウェブサイト制作の質の変化

私がweb業界に身を置き始めた2000年代前半、ウェブ制作会社の営業の一番のセールストークは「(ウェブサイトは)24時間365日、あなたの会社のことを説明してくれる営業マンです。それが◯◯万円で作れるんです!」というようなものでした。それだけで発注いただけるケースも結構ありました。

「24時間365日、あなたの会社のことを説明してくれる営業マン」というのはもちろん今も同じなのですが、今はもっと緻密に考えないといけません。採用に力を入れたいとなれば、求職者が働きたくなるような会社に見せるデザインやコンテンツを、商品をユーザーに認知させたいのであればその商品を購入することでユーザーにとってどんなメリットがあるかを伝える必要があります。

これまで手付かずだったウェブサイトを見直したら、問い合わせ・求人への応募が大幅に増えた、というお客さまのお声を多くいただいております。
そんなことで上手くいくはずがないと思う前に、一度真剣に見直してみてはいかがでしょうか?

ランガレウェブについては、こちらをご覧ください。