WYSIWYGとは?│Web用語集

WYSIWYGとは?│Web用語集

WYSIWYGはWhat You See Is What You Getの略称です。
Google翻訳によると「あなたが見たもの、それがあなたの手に入れたものだ」と出てきます。
意味は上記の通りで、入力している内容が、出力と同じかどうかを表します。

パソコンの処理能力が現在ほど高くない時代は、画面上の見た目と、印刷上の出力結果が異なることも多く、この言葉が使われるようになりました。
例えば、Adobe社のイラストレーターというアプリケーションは、今は画面データがそのまま紙に出力できますが、発売当時は線しか表示されず、写真や色の塗りなどは想像しながら作業したそうです。
また、Microsoft社のWordはまさしくWYSIWYGで、みたものがそのまま印刷されるアプリケーションになります。
Webの世界ではCMSの編集画面でWYSIWYGという言葉が使われることがありますが、この言葉自体が使われることも少なくなった印象です。
WordPressというCMSをご利用の方は「ビジュアル」という設定画面がWYSIWYGにあたります。
wordpress-visual

管理画面上で入れた設定がそのままウェブサイト上に表示されます。

また、Google Trendというページで「WYSISWYG」という単語を調べてみると、検索されている数自体は減っていますが、
2017年にも一定数残っていることが確認できます。

wysiwyg-transitive

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

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

Wikipedia ー コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容(特に印刷結果)が一致するように表現する技術。とのことです。
https://ja.wikipedia.org/wiki/WYSIWYG

Weblio辞書 ー 印刷用語としても説明されています。
http://www.weblio.jp/content/WYSIWYG

NTTPCコミュニケーションズ ー なんとも変な用語だけど、から説明が始まっていますが、わかりやすくまとまっています。
http://www.nttpc.co.jp/yougo/WYSIWYG.html

 

●使い方や場面

WYSIWYGという言葉がよく使われる場面
「WYSIWYGを使ってページ作ってね」
「管理画面にはWYSIWYGは実装されますか?」
「昔はさぁ、WYSIWYGは当たり前じゃなかったのよ。今の若い人たちは楽でいいねぇ」
と、日常生活であまり使わなくなったぶん、知っている人がドヤ顔で使うことも少なくありません。

●復習クイズ

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

 

Youtubeに流出してしまったiPhone Xの動画

Youtubeに流出してしまったiPhone Xの動画

11月3日発売開始のiPhoneの最新機種iPhone X。本体すべてがスクリーンになるという大きな変化があり、早く実際に動いているところを見てみたいという方は多いと思います。

そんなiPhone Xを実際に操作している動画がYoutubeに流出して話題になっています。
アメリカのアップル社員の父親の娘が、父親の職場で撮影したiPhone Xを操作する動画をYoutubeにアップしてしまったそうです。

iPhone Xの情報流出と聞くとスケールが大きすぎて自分たちには関係のない話のように思えますが、大事な情報がSNSで拡散されてしまうということは身の回りでも起こり得る話。SNSなどネット上に情報を投稿すると言うことは、世界中から情報が閲覧できる状態になると言うことなのです。

どうせ誰も見てないから、とSNSやブログに社外秘の情報を投稿するなどもってのほか。ネット上に公開する情報の取扱にはくれぐれも気をつけたいですね。

情報の取り扱いということに関しては、昨年2016年より国家資格として「情報セキュリティマネジメント試験」が新設されました。今までは仕組みを作る側のセキュリティ対策の資格はあったのですが、この資格については、会社の部門を問わず、セキュリティに関わる人全員のための資格です。
ウェブサイトには過去問も掲載されていますので、興味ありましたらご覧ください。

読んでもらえるウェブサイトをつくるには

読んでもらえるウェブサイトをつくるには

テキスト(文章)は、商品やサービスの内容を伝えるための非常に重要な要素です。
私たち制作者は単にテキストを”流し込む”わけではありません。ユーザーが読みやすいようにするために、いろいろな表示の調整を行っています。
今回は、私たちが、テキスト表示においてて気をつけていることをご紹介します。

 

・適切なフォント指定を行う

表示されるフォント(文字の形状の種類)は、パソコンやスマートフォン、タブレットなどの端末やOSによって違います。それぞれのフォントに適切な表示設定をすると読みやすくなります。

 

・文章を目で追いやすいよう、行間に気をつける

行と行の間の幅のことを行間といいます。行間は、文章の読みやすさを左右します。
フォントサイズの175%〜200%の行間が読みやすいと言われていますが、行数や一行の文字数が多い場合はさらに行間を広げるとより読みやすくなります。

行間175%と200%の違い

 

・必要に応じて改行をするなど、文字の塊の整理を行う

ウェブサイトやブログでは、小説のように文字を連続して配置しないほうがいいと思います。
改行に加え、3〜4行をひとかたまりに見えるようにして、1行の文字数は25〜40字くらいが読みやすい文字量だと思います。

 

・テキストの分量に気をつける

よほど興味がない限り、ユーザーは長い説明文章を読んではくれません。
ページを開いた時に大量の文章が羅列されているだけでは、ウェブサイトの直帰率や離脱率も上昇させてしまいます。
文章はできるだけ長くなりすぎないようにしてください。テキストを補足する画像を置くなどの工夫も大切です。

この他にも、フォントの違いによる文字間の幅の調整や、英数字フォントと日本語フォントを個別に設定したり、ウェブフォントを採用するなど、「コンテンツの内容を伝える為のテキストの調整」は非常に重要な作業です。

ウェブフォント(Wikipedia)

 

アクセス解析とは?│Web用語集

アクセス解析とは?│Web用語集

アクセス解析とは、ウェブサイトを閲覧した人の訪問履歴を解析・分析すること。
ざっくり言うと、自分のウェブサイトがどのくらい見られているのかを調べることです。

現在、アクセス解析にはGoogle Analytics(グーグル アナリティクス)というツールを利用するのが一般的。
無料で利用できることもあり、アクセス解析と言えばGoogle Analyticsのことを指すと考えても良いほどに広く認知されています。

他には、ページのクリック率の分布が可視化できる「ヒートマップ」や、モバイルとの連携を確認できるツール、訪問してきた企業名を判別するツールなどもあります。
これらのツールを使用して訪問履歴を解析・分析することもアクセス解析です。
アクセス解析で得たデータを上手に活用することが、良いサイトにしていくための重要な手段となります。

もっと知りたい方は下記をごらんください。

目次

他のサイトでの説明
SEOで行う主な施策
復習クイズ

 

●他のサイトでの説明

アクセス解析の仕組みなどまで詳しく説明されています。
https://www.seohacks.net/basic/terms/access_analysis/

アクセス解析でよく使用する用語が紹介されています。
http://mw-s.jp/g-analytics-terminology/

いろいろなアクセス解析ツールが比較されています。
https://boxil.jp/mag/a556/

 

●アクセス解析でわかること

アクセス解析ではさまざまなデータを調べることができます。
使用するツールによって得られるデータは異なりますが、主に以下のようなことがわかると考えて良いでしょう。

・何人の人がサイトに来たのか
→曜日や時間帯ごとに何人の人が訪問してきたのかを調べられます。

・閲覧されたページ
→ウェブサイトのどのページが何回閲覧されたのかわかります。

・閲覧された時間
→どのくらいの時間をかけてページを見ていたのかわかります。

・検索キーワード
→どんなキーワードで検索してサイトに訪問してきたのかわかります。

・使用された端末
→パソコン、スマートフォン、タブレットなど、何を使ってサイトを見ているのかわかります。

・ユーザーの属性
→訪問してきた人の年齢や性別なども調べることができます。

他にもたくさんのことがわかります。
無料ツールであればアクセス解析を導入してマイナスになることはありませんので、サイト開設の際には導入をおすすめします。

●復習クイズ

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

 

オウンドメディアとしてのランガレWEBを赤裸々に公開

オウンドメディアとしてのランガレWEBを赤裸々に公開

これから、ランガレウェブの読者の皆さんに、このサイトを始めた経緯や現状、課題などを公開して行きます。
オウンドメディアを始めようと考えている方にも参考になると思います。

▼はじめるきっかけ
お客様のオウンドメディアのサポートを経験して効果を実感したので、自社実績として始めようと思った。
オウンドメディア(Wikipedia)

▼ランガレウェブの目的
単刀直入に言って、ウェブサイトの受注を目的としています。
ただ、サイトがあれば受注ができると考えているわけでもなく、社内のITスキルの底上げの意味合いの方が強いかもしれません。

このブログはランドガレージ社員は全員読むようにしています。

また、既存のお客様に対しても定期的な情報発信をしたいという思いもありました。

そのほか、一度相談いただいたお客様、印刷関連で取引のあるお客様に対しても何かしらの発信・印象付けをしたいという意図もありました。

▼状況について
小規模経営の会社なので、専任を建てられるほど人員に余裕はありません。現時点では、外部に委託することなく各専門スタッフが少しずつ労力を割いて運用をしています。

●どんな人に読んでもらいたいか
・WEBに興味があるが活用方法がわからない
・WEB担当になったが、何をしたら良いかわからない
・WEBリニューアルを上司から指示されたが何をしたらよいかわからない

という人達の助けになればと思っています。

この連載がこれからオウンドメディアを始める方の一助になればと思い、できる限りの情報を公開していくことにしました。

何か質問等ありましたら気兼ねなくお問い合わせからご連絡をください。

次回は、サイト制作の方針について紹介したいと思います。

パンくずリストとは?│Web用語集

パンくずリストとは?│Web用語集

パンくずリストは、閲覧中のウェブサイトの現在位置と階層構造を表示したものです。
英語ではパン粉を意味する「Breadcrumb」または「Breadcrumb Navigation」と言われます。

たとえばこのページ

パンくずリスト

 

 

 

「 HOME」という項目の中に「ブログ」があり、その中に「WEB用語集」というカテゴリがあります。
そのなかにこのページ「パンくずリストとは?│Web用語集」が入っています。

語源は、最初聞いた時には嘘かと思ったのですが、グリム童話の「ヘンゼルとグレーテル」です。
家に帰れるようにパンをちぎっておいた、というあの童話がこのパンくずリストの名前の語源です。
ドヤ顔して語れますね。

パンくずリストについてもっと知りたい方は下記をごらんください。

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

wikipedia ー パンくずリストには3種類ある。という説明があります。
https://ja.wikipedia.org/wiki/パンくずリスト

サルワカ ー デザイン面、SEOとしての説明が記載されています。
https://saruwakakun.com/html-css/basic/breadcrumb

UX MILKー 使うべき記号など気をつけるポイントが記載されています。
http://uxmilk.jp/58247

 

●使い方や場面

パンくずリストという言葉がよく使われる場面
「パンくずリストは設置しますか?」
「階層が深いのでパンくずリストは必須ですか?」
「スマホサイトではパンくず※の表示は3階層にしましょう」
※リストは省略して使われることがあります。

●復習クイズ

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

 

無料ブログサービスの特徴まとめ

無料ブログサービスの特徴まとめ

Webの仕事に携わっているとよく聞かれるのが「ブログやった方がいいかな?」と言う質問。
フリーランスで仕事をしている人、何かのビジネスを始めようとしている人の多くはブログでの発信に関心をもっているようで、僕はほぼ間違いなく「やった方がいいですよ」と回答してきました。
ただ、そのあとよく聞かれる「どこでブログをやればいいかな?」と言う質問。
この質問は困りものです。無料のブログサービスはたくさんありますが、ブログでどんなことをしたいか、更新頻度、デザインへのこだわり、サーバーの強さなど、何を重要視するかで選ぶべきサービスが変わってくるからです。

現在、大手の無料ブログサービスと言えば「Amebaブログ」「livedoorブログ」「FC2ブログ」「LINEブログ」あたりでしょうか。LINEブログ以外はひと通り利用したことがあるので、個人的な意見も交えつつ、それぞれどのような特徴があるのかをお伝えします。

Amebaブログ
通称「アメブロ」。アメーバ独自のサービス「ピグ」「ゲーム」などと連携されていて、ユーザー同士の交流が盛んなイメージがあります。誰がブログを訪問したのかをチェックできる「足あと」機能もあり、まるで昔のmixiのよう。どこかSNSっぽいブログサービスです。そのためアクセス数は比較的伸びやすく、お店やサービスのブログとして使うのには適性があると思います。
しかし広告枠が多く、アフィリエイトも制限があるため、ブログで副収入を得ようとしている人には向かないかもしれません。

livedoorブログ
僕が最もよく使ってきたのがライブドアブログです。デザインのテンプレートが多く、細かいカスタマイズもできて、ブログのオリジナリティを出しやすくなっています。独自のドメインを設定することもできますし、最近は写真などのデータを容量無制限でアップロードできるようにもなりました。
さらに他のブログサービスよりもサーバーが強いらしく、2ちゃんねるのまとめサイトやニュースサイトがライブドアブログを使っていることも多いです。使い勝手も悪くないですし、デメリットがほとんどないかもしれません。

FC2ブログ
FC2ブログもカスタマイズをしやすく、アフィリエイトの制限もないため、現在はブログサービスの中でもトップクラスの利用数だそうです。FC2にはブログサービス以外にもレンタルサーバーやショッピングカートのサービス、ホームページ作成サービスなど、さまざまなサービスが用意されているので、Web関連でいろいろな無料なサービスを利用する予定の人は、すべてFC2のサービスを利用してしまってもいいのかもしれません。
ただFC2ブログのデメリットは、1ヶ月以上放置してしまうと大きな広告が表示されてしまうこと。更新すればすぐに消えますが、広告にブログを乗っ取られたような感覚になってしまいます……。

LINEブログ
以前は芸能人のブログと言えばアメブロのイメージだったのですが、近年は多くの芸能人がLINEブログに引越しています。スマホからの投稿しかできませんが、その分シンプルで気軽に投稿できるようにできているようですね。あまり重く考えず、SNSに気軽に投稿する感覚でブログを始めたいと言う人には向いているのではないでしょうか。

続 スマホのユーザーインターフェイス【パーツ編】

続 スマホのユーザーインターフェイス【パーツ編】

前回の【ナビゲーション編】はウェブサイトのメニューの種類を紹介しましたが、今回はコンテンツを見やすくするためのパーツをご紹介します。

・カルーセルパネル
複数の画像をスライドして切り替えて表示するUI(ユーザーインターフェイス)です。
スクロールせずに見せられるというメリットがある一方、動きに気を取られてしまってスライドの中身まで伝わらないというデータも出てきているようです。使う箇所はよく検討したほうが良いでしょう。

・パンくずリスト
ユーザーが現在どこにいるかを示すテキストです。
ページ数の少ないスマートフォンサイトでは、表示しないケースも増えてきました。ページ数の多いサイトほどあったほうが良い便利なパーツです。

・カードUI
ランガレウェブトップページでも使用しています。
各記事や各コンテンツをカードのように配置させることで、とても見やすいUIです。

・モーダルウインドウ
スマートフォン画面だとどうしても小さくなりがちな画像を、タップしたあと拡大表示する機能です。
パソコン版ウェブサイトではよく使用されていましたが、レスポンシブデザインで制作した場合、スマートフォン画面でタップして拡大させて、かえって見づらくならないか留意して制作しなければいけません。

ウェブサイトを閲覧しているときによく目にするパーツもあるかと思いますが、スマートフォンウェブサイトのUIはまだまだ進化の途中段階にあります。ただ便利だから採用するということではなく、他サイトでも使用されていてユーザーに馴染みのあるUIかどうかをひとつの採用基準としてみても良いでしょう。

SEOとは?│Web用語集

SEOとは?│Web用語集

SEOとはSearch Engine Optimizationの略。
日本語で「検索エンジン最適化」という意味になります。

「ホームページを開設するとまず取り組みたくなるのがSEO。
SEO対策をすれば検索順位が上がって、アクセス数が増えるんでしょ?
でも具体的にSEO対策って何をするの……?」

SEOって言葉はよく聞くけど、検索順位を上げるための対策ということしかわからない。
そんな方が多いのではないでしょうか。

SEOとは検索順位を上げるための一連の取り組みを指します。
つまり、あらゆる側面からサイトを解析し、そのサイトの状況に合った施策を行うことで検索順位を上げていくのです。

「SEO=これ」と決まったものはありません。
SEOにもいろいろあるのです。

もっと知りたい方は下記をごらんください。

目次

他のサイトでの説明
SEOで行う主な施策
復習クイズ

 

●他のサイトでの説明

Wikipediaにも項目があります。
https://ja.wikipedia.org/wiki/検索エンジン最適化/

SEOの歴史から具体的な施策まで、初心者にもわかりやすく書かれています。
https://ferret-plus.com/1733

SEOにもメリットとデメリットがあります。
http://webmarke.jp/pr/what-seo/

 

●SEOで行う主な施策

SEOで行う施策には主に以下のようなものがあります。
ここでは簡潔に説明させていただきます。

・キーワードを明確にする
→どんなキーワードで検索されたときに上位に表示させたいか、明確にしておく必要があります。

・Googleに読み込んでもらいやすいようにページを作る
→検索順位を上げるには、まずGoogleにサイトを知ってもらう必要があります。ページを最適化し、クローラーが来やすいサイトにしなければなりません。

・スマホ対応をする
→スマートフォンからも見やすいサイトにすることはとても重要です。対応されていないと上位表示が難しいとまで言われています。

・良質なコンテンツ(ページ)を作る
→検索でサイトに訪問してきた人が満足する内容のページを増やすことで、Googleからの評価が上がります。

・質の高い被リンクを増やす
→良いサイトからリンクしてもらうことでサイトの評価が上がります。良質なコンテンツを作ることで、被リンクの数も増えていくはずです。

このような施策を効果的に行うことでサイトの評価が上がり、検索順位も上がります。
ただし、いずれも地道な努力と根気が必要になるでしょう。
爆発的に効果が出る広告と違い、SEOの効果はじわじわと現れるものなのです。

●復習クイズ

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

 

AIってすごいーその2。AIの仕組みを大まかに知ってみよう

AIってすごいーその2。AIの仕組みを大まかに知ってみよう

前回は、イラストを認識して自動着色するというものでしたが、今回は画像の認識プログラム不要で試せるサービスがグーグルで公開されていたので紹介します。
何言ってんだという方はとりあえず下記画像をみてください。

左側がカメラに映った私のグーチョキパーですが、
瞬時に認識して、設定したアウトプット画像に変換されます。

今回私が設定したアウトプット画像
グー  → キラキラする握りこぶし
チョキ → 回るハサミ
パー  → かめはめ波

なかなかここの説明だけだとわかりにくいと思いますので、今回使用したサイト「Teachable Macchine」で試してみてください。AIやディープラーニングの仕組みを学ぶサイトで英語サイトですが、英語がわからなくても画像を登録するだけなので、わかると思います。

インプットした動作を認識して、設定したアウトプット(GIF、SOUND、SPRRD)が確認できます。

今回は「グー」「チョキ」「パー」で試してみました。一度登録すると、反対の手でも認識しますし、他の人の手でも認識されました。また、「怒った顔」「悲しい顔」「無表情」を登録してみたら、ちゃんと判断してくれましたし、ドラゴンボールの「かめはめ波」「気功砲」「アクマイト光線」もちゃんと認識します。

これ、やる前には何の感動もなかったのですが、実際やってみると「おぉ!」となりますよ。
百聞は一見に如かずとはいいますが、百見は一体験に如かず(造語)とはまさにこのこと。

一度体験してみると、車の自動運転というのはこれを限りなく高度化したものなんだろうな、ということが想像しやすくなります。
ぜひ友達や家族と一緒にやってみてください。

CMSとは?│Web用語集

CMSとは?│Web用語集

CMSとはContent Management Systemの略称です。
日本語にすると「コンテンツ管理システム」です。

HTMLを編集するスキルを持っていなくても更新できるのがメリットですが、サイトの全てをHTMLを使わずに更新できるようにするには、CMS自体をかなりカスタマイズしないといけない場合がほとんどなので注意が必要です。基本的には、ニュースリリースやブログを簡単に更新するためのツール、と思っていれば間違いないでしょう。

このランガレWEBもCMSであるWordPressを利用して作っています。

もっと知りたい方は下記をごらんください。

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

グーグルの用語として定義されています。
http://www.site-shokunin.com/whats-cms/

言葉の定義だけではなく、ある場合とない場合の見積もりや作業手順の比較などが書いてあります。
http://www.nttd-bb.com/service/web/cms/about.html

特徴・CMSの選定ポイントなどが述べられています。
https://www.seohacks.net/basic/terms/cms/

 

●使い方や場面

CMSという言葉がよく使われる場面
「君、我が社に適したCMSを選んでくれたまえ」
「月一回の更新だとCMSを導入するメリットはありますか?」
「CMS導入のメリット・デメリットは?」

●復習クイズ

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

 

AIってすごい。イラストの自動着色サービスを試してみた

AIってすごい。イラストの自動着色サービスを試してみた

ちょっとした落書きを人工知能のAIが認識し、自動で着色をしてくれるというWebサービスが公開されて話題になっています。「PaintsChainer(ペインツチェイナー)」と言うサイトなのですが、早速その性能を試してみました。


まずはあらかじめ作っておいた線画を読み込ませます。


今回はこちらのイラストを読み込ませてみることにしました。リンゴとみかんです。読み込ませてから着色ボタンを押してみると…


仕上がりはこんな感じに。リンゴの色は若干怪しいですが、みかんは完璧な色を着色してくれました。AIでリンゴとみかんのイラストだと認識してくれたのでしょう。すごい。

 続いては人物のイラストも読み込ませてみます。

 すると全体的に薄めではありますが、顔の部分にはしっかりと肌色で着色されています。

 さらにこのサービスでは、線画に色のヒントを付けてあげることで、ヒントに合わせた色に着色し直してもらうこともできます。顔の部分に水色、シャツにピンク、ジャケットにグレー色というヒントを付けてもう一度着色ボタンを押してみると…

 ヒントに合わせて気持ち悪い感じに着色し直してくれました。実によくできてますね…。今回は元の線画のクオリティが低いのではみ出ている部分などもありますが、丁寧に描いたイラストを読み込ませるとかなり完璧に着色してもらえるようです。

15年くらい前まで漫画家は全員が紙とペンで原稿を仕上げていましたが、近年はパソコンで原稿を仕上げる人がほとんどとなりました。このままAIの技術が発達していくと、もしかしたら近い未来、漫画家の仕事は線を描くだけになってしまうかもしれません。

スマホのユーザーインターフェイス【ナビゲーション編】

スマホのユーザーインターフェイス【ナビゲーション編】

ウェブサイトに触れる機会がスマートフォン中心にシフトする中で、より一層重要になってきたのがユーザーインターフェイス(UI)です。
小さな画面で必要な情報を伝えるためには、様々なUIを駆使してユーザーにとって使いやすく、伝わりやすい情報の掲載方法にしなければなりません。

前回ご紹介した、ハンバーガーアイコンを押した後のメニューにはいくつか種類があります。
今回は、スマートフォン用のウェブサイト制作の現場でよく使われる、メニュー表示方法の代表的なものをご紹介したいと思います。

・アコーディオンメニュー
タップすると開閉するメニューです。
ページを移動せずに多くの情報を表示できるので、ウェブサイトの階層が深いときに有効です。

・ドロワーメニュー
画面半分を覆うようにメニュー部分がスライドしてきます。
スライドしてきたメニュー部分は下方向にスクロールできるので、複雑な構造・情報量の多いウェブサイトに有効です。

・スプリングボード
テキストのみではなく、アイコン付きのボタンが画面に表示されるメニューです。
iPhoneのホーム画面のように使えるので、ユーザーが迷わず操作することができます。

・タブバー
アプリによくある、画面最下部にボタンを並べるメニューです。
常に表示されているため、ページ移動が楽でユーザーが迷いにくいのがメリットです。
ウェブサイト全体のカテゴリが少ないときに有効です。

いかがでしたでしょうか。メニューにも様々な種類がありそれぞれに特長があります。メニューの数やウェブサイト全体の情報量によって適切なものを選ぶようにしましょう。
次回は、ウェブサイトの下層ページでよく使われるパーツを紹介します。

校正などのやりとりに便利な「AUN」

校正などのやりとりに便利な「AUN」

印刷物やウェブの校正などのやりとりって、慣れない方には面倒ですよね。

たとえば
・PDFにコメントを書いたり
・パワーポイントのデータをやりとりしたり
・FAXのやり取りをしたり
とそれぞれ手間がかかります。

ファイルのやり取りをすると、何が最終データか、何が対応済みかなどがわからなくなってきてしまいます。

そこでで、便利なサービスが「AUN」というツール

公式サイトでは
「ふせん紙の感覚で、サイトや画像にメモを貼って、共有できるツールです」とかいてありますが、大げさじゃありません。

個人的に一番のポイントだと思ったのは、登録なしでURLを入力するだけで画面共有ができるところ。

これは、一度体験してみると驚きの簡単さです。

百聞は一件にしかず。ということで流れを見て見ましょう。

1.URLを入力
画像参照「ビジュアルコミュニケーションツール – AUN Webサイト」

2.範囲を指定して、書き込み


参照「ビジュアルコミュニケーションツール – AUN」Webサイト

3.保存してURLを取得して、連絡

画像参照「ビジュアルコミュニケーションツール – AUN Webサイト」

パスワードを設定できるのも嬉しいところですね。

4.見る


画像参照「ビジュアルコミュニケーションツール – AUN Webサイト」

以上。公式サイトの説明GIFがわかりやすかったので使用させていただきました。

●残念なところ
無料だから仕方がないのですが、保存期間が30日。というのは少し不安な期間設定だと思います。
ただし、画像としてエクスポートすることもできるので、消える前にバックアップを取っておくが可能です。

●こうなるともっと使いやすい
・複数ファイルを一括でアップロード
・一度書いたコメントの削除または非表示などができるといいなというのがユーザーとしての感想です。

インターネット速度テスト

インターネット速度テスト

インターネットをしていると急に動きが重くなったり、ページが全然開かなくなってしまったりすることってありますよね。これはインターネットの速度が遅くなってしまうと起こる現象なのですが、一時的に遅くなるのならまだしも、慢性的に速度が落ちてしまうようだと困ってしまいます。こんな時には「インターネット速度テスト」をしてみてはいかがでしょうか。実はこのインターネット速度テストはGoogleを使って簡単に試すことができます。

Googleの検索窓に「インターネット速度テスト」と入力して検索をすると、Google公式のインターネット速度テストの画面が表示されます。

あとは速度テストを実行ボタンを押すだけ。PCからでもスマホからでもできます。皆さんも是非、今いる環境で試してみてください。


まるで血圧測定のような感覚でメーターが動き、30秒ほどで結果がわかります。


結果が表示されました。現在いる場所ではかなり安定して速度が出ているようです。ちなみに「Mbps」は1秒間に通信可能なデータ量が何メガビットかを表す単位。1秒間に93.6メガビット(11.7メガバイト)ほどダウンロードができているようです。
※メガバイトとメガビットは似ていますが、違う数値になるので注意。ファイルのサイズなどで使う単位が「バイト」で、1メガバイト=8メガビットとなります。

インターネットの速度は感覚的に速い遅いと判断しがちですが、数値で確認することで客観的に速度を判断できるのはとても大切なこと。普段から気にせずネットをしていたけど、調べてみたら速度が全然出ていないことがわかったという人もいると思います。

実はGoogleには検索以外にもこのような機能がいくつか用意されているのです。機会があれば他にも紹介していきたいと思います。

ハンバーガーアイコン

ハンバーガーアイコン

突然ですが、ハンバーガーアイコンをご存知ですか?
ハンバーガーアイコンとは、スマートフォンのアプリやウェブサイトで使用されるメニューアイコンの呼び名です。その名の通り、下の図のように三本の線がパンとパンで挟まれた肉、つまりハンバーガーに見えることからハンバーガーアイコンと呼ばれています。わかりやすいネーミングですね。

最近ではわりと見るようになったハンバーガーアイコンですが、登場当初は「メニューを表していることが分かりにくい」ことが最大の問題でした。仕方なく、ハンバーガーアイコンに「メニュー」「MENU」などのテキストを併記するなどの工夫がなされていました。
そのうちにアマゾンやアップル、銀行などがこぞってハンバーガーアイコンを採用し、三本線はメニューアイコンだという認識が広まり一般化したという経緯があります。

現在でもまだメニューだと分かりにくい、サイト全体の構成がつかみにくい、という意見も少なくないのですが、スマートフォンアプリ・ウェブサイトでハンバーガーアイコンが積極的に採用されるのには理由があります。

このように、メニュー部分のスペースが大きいと、本来伝えるべきメイン画像やコンテンツ部分を覆ってしまいます。伝えるべき内容が伝わりにくい、というのはウェブサイトにおける最大の欠点となりえます。
ウェブサイトを閲覧しているユーザー層は、ハンバーガーアイコンを認知できていると想定されるならば、ハンバーガーアイコンの採用を考えても良いと思います。

ただし、ターゲットユーザーにハンバーガーアイコンが認知されそうもないのなら、メニューの数を極力減らしたり、別のナビゲーション方法で展開するなどの工夫が必要になります。

サイト制作者や運営者の都合でハンバーガーアイコンの実装を判断するのではなく、ユーザーへの影響を分析して、それに基づいた設計をすることが大切です。

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

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

前回は、Amazonでのお得な検索方法を紹介しました。今回はURLの構造についての説明を。
ランガレWEBの今ご覧いただいているページのURLは
https://web.landgarage.co.jp/2017/10/04/amazon90off2/ です。
これは 「web.landgarage.co.jp」というサイトの中の 「2017」年の中の 「10」月の中の 「04」日の中にある 「amazon90off2」というページを示します。 スラッシュのマークがそのまま階層構造を示しているわけです。
この「10」を「08」に変えて、それ以下を削除した場合はどうなるか。
https://web.landgarage.co.jp/2017/08/
ランガレウェブの場合は、 8月の記事一覧が出てきます。 もう少し削って2017が最後に来るようにすると
https://web.landgarage.co.jp/2017/
2017年の記事一覧が出てきます。 ランガレウェブサイト内には2017年の記事一覧というリンクはないので、 URLの構造を推測して、自分でページを見つけた。ということになります。

サイトのURLを見て、ページを移動したときにどのようなURLになっているかを常に気にしていると 伝えたい情報の意図が垣間見えることがあるので面白いですよ。 このような見方をすると、 リンクに繋がれていないページをみつけたり、 1ページあたり10件しか表示されていないものを100件表示したり、 と色々便利な使い方ができるようになります。

具体例ですが、写真素材等を販売しているPIXTAというサイトがあります。 デフォルトの表示件数は ・25件・50件・100件・200件です。この一覧表示件数ですが、URLの該当箇所から変更できます。 25件表示を1000件にしてみましょう。 25件表示をしているときに表示されているURLのなかには「25」という文字列があります。 これを「1000」に変えてみましょう。

すると、一覧表示数が1000になります。

たくさんの画像を見るときは いちいち次のページへ移動しなくて済むので楽ですよね。 ちなみに、このように数字がいじれないようにサーバー側で制御することもできるので、 実際は数字を変えられるサイトの方が少ないです。

ついでに、URLに関する豆知識をひとつご紹介します。
アマゾンのページに飛んだ時にURLに「-22」という数字がついていたら、日本でのアフィリエイトアカウントが適用されているということです。このまま何かを購入したら紹介者にお金が入る仕組みになっています。たとえば、前回紹介したOffzonというサイトを経由して商品を購入すると、Offzonサイト運営者に紹介料が支払われる、という仕組みです。

ちなみに、大手出版社もやっているんですよ。たとえば集英社の「ドラゴンボール」のページを見てみます。
http://www.s-manga.net/book/4-08-851831-4.html
このページ内の「ネットで注文する」項目のの中のAmazonリンクをクリックすると、ついてますね。「booknavi0e-22」という文字が。 この「booknavi0e」がアフィリエイトIDのアカウント名ということになります。
集英社が直接作ったアカウントか、運営会社が作ったものなのかはわかりませんが、 このサイト経由で購入すると知らずのうちにアフィリエイト売り上げに貢献する、ということになります。

このようにURLは場所を示すだけではなく、紹介アカウント情報を受け渡しすることなどにも使われます。
サイトの仕組みであったり構造であったり、さまざまな情報を知ることができるURL。 知るほどに面白いと思いませんか?

クラウドファンディング

クラウドファンディング

最近、割と耳にするようになったクラウドファンディングってご存知ですか?

クラウドファンディングを検索してみると、「不特定多数の人がインターネット経由で、他の人々や組織に財源の提供や協力などを行うことを指す、群衆(crowd)と資金調達(funding)を組み合わせた造語」と出てきます。つまり、インターネットを通じて資金調達を呼びかける方法ということです。

今までは、斬新なアイデアやプロジェクトがあるのに資金が足りない時は、お金を借りるというのが一般的な資金調達の方法でした。しかし、専用のサイトを通じてインターネットで広く資金提供を呼びかけることができるようになったことで、優れた企画を持っていれば誰でもプロジェクトを実現させやすくなったのです。

資金を提供したプロジェクトが目標金額に到達するかどうかを見届けるのはゲーム性があって面白いとも言いますし、資金提供者には金額に応じたリターン(特典)が用意されている場合も多く、買い物感覚で気軽に資金を提供できることも多いようです。

僕自身はまだクラウドファンディングを利用したことはないのですが、SNSで繋がっている人がプロジェクトを立ち上げたり、資金提供をしたりしている様子を確認することは以前よりも格段に増えています。
日本でもますますクラウドファンディングを利用しやすい環境になるんだろうなあと感じています。

海外ではポテトサラダを作るだけのプロジェクトが5万5千ドルを集めたり、穴を掘るだけのプロジェクトが1000万円を集めたりと、意味不明なプロジェクトも注目を集めています。

ポテトサラダを作るだけのプロジェクトに5万5千ドル
http://nlab.itmedia.co.jp/nl/articles/1408/04/news070.html

穴を掘るだけのプロジェクトが資金を1000万円以上集める
http://nlab.itmedia.co.jp/nl/articles/1611/29/news108.html