インターネットを閲覧する環境の主流がパソコンからスマートフォンへ移行してまだ間もないような気がしていましたが、10月30日のSankeiBizに下記のような記事が紹介されていました。

ドコモ、３画面スマホ開発へ　折り畳み式　広げればタブレット並み

スマートフォンの画面サイズおよび端末のサイズは、2007年のiPhone登場時から今日に至るまでずっと拡大を続けてきましたが、そろそろポケットからはみ出しそうなサイズにまで拡大し、端末の大きさとしては限界のようにも思えます。そうなると上記の記事のように、複数画面にして折りたたみ時の端末サイズは今のまま、開いてさらに表示領域を広げる、という発想が出てくるわけですね。ガラケーが辿った道と同じです。
今後さらに変化を遂げていくのでしょう。

もちろん、現在のスマートフォン画面でエクセルやパワーポイントの書類を編集するような操作は不向きです。3画面スマホがどこまで普及するかはわかりませんが、複数画面のスマートフォンならノートパソコンと変わらない操作ができそうなので、ビジネス用途に加え写真・デザインの編集や動画の視聴なども便利になるでしょう。

一方で、ウェブ制作の現場では、現在のスマートフォンがメインのレスポンシブデザインから、パソコンとスマートフォンが共通のデザインになるかもしれません。複数画面をより活かしたデザインも登場するでしょう。
表現の幅が広がるのは、制作をする人間として非常に楽しみですが、複数画面のスマートフォンと、旧来のスマートフォンが混在する状況では、現在よりさらに多くの画面サイズにウェブサイトを対応させなければならないという問題も出てきます。

いずれにしても、数年後でさえ、スマートフォンは今とは別の形をしているかもしれません。
そのとき私はどのようなウェブサイトやサービスを作っているのか、とてもに楽しみです。

（2020.2.6 内容更新）

タイトルタグはHTMLのタグのひとつでページのタイトルを示します。
ブラウザでのタブに表示されている文字もタイトルタグです。
また、Bookmark(お気に入り)に登録するときも、タイトルが表示されます。

検索結果に出てくる見出し文言もタイトルタグで設定した文字列が表示されます。

このページのタイトルは「タイトルタグとは？│Web用語集」で、
HTMLでは、下記のように表記します。

<tilte>タイトルタグとは？│Web用語集</title>

SEO対策、というものをする際にまずチェックするのがこのタイトルタグですし、Googleも公式ページで、適切なページタイトル記述を付けよう。と明記しています。

Google検索エンジン最適化スターターガイド【PDF】
あまり知られていませんが、上記PDFはSEO対策をするならまずはここからという超がつくほどのよくできたガイドです。

タイトルタグについてもっと知りたい方は下記をごらんください。

目次

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

●他のサイトでの説明

HTMLクイックリファレンス ー  <TITLE>は省略できない要素と説明されています。使用例がソースコードと共に掲載されています。
http://www.htmq.com/html/title.shtml

できるネット(Impress社) ー 意味、使い方、好ましくない使い方が説明されています。
https://dekiru.net/article/12829/

海外SEO情報ブログ ー PDFファイルのタイトルタグの設定方法と、SEOの評価について書かれています。
https://www.suzukikenichi.com/blog/seo-for-pdf/

●使い方や場面

タイトルタグという言葉がよく使われる場面・会話
「内部SEO対策はまずタイトルタグから見直しましょう。」
「適切なページタイトルをつけた方が良いですよ。」
「あちゃー。ページタイトルが全ページ一緒です。」
「スマートフォンの検索結果画面に合わせてタイトルの文字数を減らしましょう」

●復習クイズ

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

前回は
・はじめたきっかけ
・目的
を書きました。

今回は、サイト公開に至るまでに決めたこと・考えたことを説明します。

社内知識の蓄積が目的ならブログだけで良いのですが、そこから受注にもつなげたいという思いがあるため、WEBサイトという形が最適と判断しました。
ただし、サイト制作に力を入れすぎるとスタート自体が遅れてしまうため、シンプルなサイト構成＋ブログ、でスタートすることになりました。

サイト構成について

ウェブ制作をしていることをナビゲーションメニューからわかるように以下のような構成にしています。

ブログが中心のサイトを想定していたためトップページへのアクセスよりも、Googleエンジンなどの検索エンジンからトップページ以外の流入が多いことを予想しました。
そのため、常に表示されているナビゲーションとその名前の付け方がとても重要になります。
（2017年10月のデータだと、トップページからウェブサイトに入った人は全体の30％を切っていました。）

以下、各項目の内容についてです。

ランガレウェブについて

他サイトでの「About US」にあたる部分です。

制作の流れ

WEB発注したことがない方にも全体像を掴んでいただくために作成した項目です。使用している写真は、実際の雰囲気が感じられるように社員をモデルにして撮影したものです。

スタッフ

こちらもWEBを発注したことがない方のために、ウェブ制作においてどのような役割分担があるのかを知っていただくために作成しました。
イラストについては、パートナーのイラストレーターにスタッフの顔写真を渡して書き起こしてもらっています。

ブログ

このサイトの肝となるコンテンツです。この項目については次回詳細をお伝えします。

運営会社

いわゆる「企業情報」です。

お問い合わせ

質問などのお問い合わせと、サイト制作の相談をいただけるように
必須項目は少なめに設定しています。

現在、上記項目に「制作実績」が必要だと感じていますので、追加予定です。

次回は「ブログ」の更新の体制やルールについて紹介したいと思います。

（2020.1.30 内容更新）

リダイレクトとは、Webページに訪れてきたユーザーを自動的に別のWebページへと転送することです。もともとは「向きを変える」と言う意味の言葉になります。

例えばWebサイトの移転やリニューアルでURLが変わるとき、リダイレクトの設定をしておかないと、古いURLを開いてもページが表示されません。

訪問してきたユーザーはサイトが閉鎖されたものだと思ってしまうでしょう。リダイレクト設定をすることで、正しいページへと誘導することができるのです。

また、普通にインターネットをしているだけでは気づきませんが、リダイレクトはいろいろな設定の仕方があります。サーバーの環境、用途、その他さまざまな条件に合わせた方法で設定をします。

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

目次

他のサイトでの説明
身近なところで使用されているリダイレクト
復習クイズ

●他のサイトでの説明

言葉の使い方までわかりやすく説明されています。
http://wa3.i-3-i.info/word1482.html

動画付きで解説されています。
https://ferret-plus.com/1027

●身近なところで使用されているリダイレクト

リダイレクト設定されているWebページは、身近なところにもたくさんあります。

・Yahoo! Japan
https://www.yahoo.co.jp/
Yahoo! Japanでもリダイレクトが設定されています。
Yahoo! Japanはパソコンで開いたときと、スマートフォンで開いたときでは違うレイアウトのページが表示されます。
これはスマホでアクセスされた場合に、スマホ用のページへとリダイレクトしているのです。

・Wikipedia
https://ja.wikipedia.org/wiki/
Wikipediaもさまざまなページでリダイレクトが使われています。
例えば「浦和レッズ」で検索すると、正式名称の「浦和レッドダイヤモンズ」のページにリダイレクトされます。

●復習クイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※ウェブフォント（Wikipedia）

（2020.1.9 内容更新）

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

パソコンの処理能力が現在ほど高くない時代は、画面上の見た目と、印刷上の出力結果が異なることも多く、この言葉が使われるようになりました。

例えば、Adobe社のイラストレーターというアプリケーションは、今は画面データがそのまま紙に出力できますが、発売当時は線しか表示されず、写真や色の塗りなどは想像しながら作業したそうです。

また、Microsoft社のWordはまさしくWYSIWYGで、みたものがそのまま印刷されるアプリケーションになります。

Webの世界ではCMSの編集画面でWYSIWYGという言葉が使われることがありますが、この言葉自体が使われることも少なくなった印象です。WordPressというCMSをご利用の方は「ビジュアル」という設定画面がWYSIWYGにあたります。

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

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

2019年11月には一時的に検索数が跳ね上がっています。使われることが少なくなったからこそ、話題になったときに検索した人が増えたのかもしれません。

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は当たり前じゃなかったのよ。今の若い人たちは楽でいいねぇ」
と、日常生活であまり使わなくなったぶん、知っている人がドヤ顔で使うことも少なくありません。

●復習クイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

（2020.1.14　内容更新）

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

現在、アクセス解析には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/

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

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

・何回ページが表示されたか
→いわゆる「ページビュー（PV）」です。

・広告が何回表示されたか
→「インプレッション」といいます。PVと混同されやすいですが、実際はまったく別の指標です。

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

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

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

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

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

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

・直前にどんなページを見ていたか
→リンク元のサイトを調べることができます。「リファラー」といいます。

・ページを開いたけどすぐに閉じた人の数
→直帰・直帰率といいます。

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

●復習クイズ

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

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かどうかをひとつの採用基準としてみても良いでしょう。

（2019.12.19内容更新）

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

たとえばこのページ

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

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

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

目次

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

●他のサイトでの説明

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

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

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

●使い方や場面

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

●復習クイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

たとえば
・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には検索以外にもこのような機能がいくつか用意されているのです。機会があれば他にも紹介していきたいと思います。