「デザイン思考」

文学、科学、エンジニアリング、ビジネスなど、あらゆる世界で活用することができる「デザイン思考」。単なるデザイナーの思考、というニュアンスとは異なり、一言で言うと「ユーザーを中心に物事を考えよう」という考え方のことを指すのです。

デザイン思考のプロセス

デザイン思考は、下記のプロセスを基本的には順番に実行されます。

1.共感/ユーザーの行動を理解し、何が問題なのかを見付ける
2.定義/ユーザーのニーズや問題点、自らが考えることをハッキリさせる
3.概念化/仮説を立て、新しい解決方法となるアイデアを生み出す
4.試作/問題に取り組み始め、アイデアやコンセプトを具現化する
5.検証/課題が本当に解決されているかを判断する

デザイン思考で効果を得る

各プロセスは、多くの選択肢の中から解決策を導く作業にもなり得るのです。

1.共感/何が問題だったのかがずれていなかったか
2.定義/ニーズや問題点は正しかったか
3.概念化/解決方法やアイデアは他になかったか
4.試作/アイデアは解決方法は本当にユーザーに伝わる形になっていたか
5.検証/結果が出ない場合はまた最初のプロセスから考え直せば良い

プロセスと行動、破壊と再構築の繰り返しこそがデザイン思考

問題解決にあたってこのプロセスを常に考え、繰り返すことこそがデザイン思考の本質です。
ウェブ制作のみならず様々な場面で活用できるデザイン思考、まずは身近な仕事の課題解決から取り入れてみてはいかがでしょうか。

モーダルとは?│Web用語集

「モーダル(modal)」とは、直訳すると「様式の」「様態の」などという意味を持つ形容詞になりますが、Webにおいては主に「モーダルウィンドウ」のことを指します。

モーダルウィンドウとは、例えば以下のように表示されるウィンドウのことです。

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

目次

他のサイトでの説明
モーダルウィンドウの使い方
復習クイズ

●他のサイトでの説明

初心者向けのわかりやすい解説です。
https://wa3.i-3-i.info/word11432.html

IT用語辞典にも掲載されています。
https://www.weblio.jp/content/モーダルウィンドウ

●モーダルウィンドウの使い方

モーダルウィンドウは親ウィンドウの上に強制的に表示され、閉じる処理をするまでは親ウィンドウの操作ができなくなるという特性があります。
そのため、主に以下のような用途で使われます。

・特に重要な注意を促すとき(「本当に送信しますか?」「削除しますか?」等の最終確認、年齢認証など)

・フォトギャラリーの拡大表示をさせたいが、別ウィンドウで表示させるのを避けたいとき

・確実に閲覧してほしい告知、広告等を表示させるとき

●復習クイズ

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

最近ホットなQRコード

QRコードは、1994年にデンソーの開発部門が開発、現在は㈱デンソーウェーブの登録商標(第4075066号)となっています。QRは、Quick Responseの略で、情報の高速読み取りができるように開発されたIT技術です。
携帯電話の普及により急速に広がり、今や街のいたるところでQRコードを目にするようになりました。

格納できる情報量が多い

横方向にしか情報を持たないバーコードに対し、縦横に情報を持つのがQRコードの大きな特徴の1つ。そのため格納できる情報量が多く、数字だけでなく英字や漢字など多言語のデータもコードの中に入れておくことができます。
推奨はされていませんが、濃淡の判別が可能な色あいなら色を付けたQRコードを印刷することもできます。ファストフード店の包み紙や、ポスターなどでよく見かけます。

幅広く普及してきた

元々、自動車部品工場や配送センターでの使用を念頭に開発されましたが、今では生産・運送・保管・販売などに広く使われているようです。
携帯電話については、J-PHONE(今は、ソフトバンクモバイル)が初めてフィーチャーフォン(ガラケー)でQRコードに対応。搭載カメラで、QRコードを撮影してコードを読み込む処理をしていました。今となって懐かしい。
その他、航空券、各種入場券にも普及し、QRコードを活用したチケットレス化も加速しています。
プリペイドカードでは、特定の端末や販売機のみで認識できる特殊なライン上に印字し、複製できないような対策もとられています。

決済サービスの話題がホット

少し前は、中国でQRコードが普及していると話題になっていました。飲食店に入店したら、専用のスマートフォンアプリを使用し、メニュー上のQRコードを読み取って注文するなど、決済サービスの他にもあらゆることで活用しています。
しかし今、日本にもQRコードとスマートフォンを使ったキャッシュレス文化の波がやってきています。
大手IT企業や銀行が参入し、日本にキャッシュレス文化を根付かせようとサービス強化を始めました。
楽天(楽天市場)やLINEもそうです。
QR決済をするには各社の専用アプリを導入する必要がありますが、利用ユーザーが多いため、QR決済ができる店舗が増えてきています。
今秋にも他の大手企業が新しいサービスを始めるようです。QRコードがますます身近なものになりそうです。

動画からテキストデータを抽出

半年ほど前に、Googleドキュメントの音声入力機能が便利なことや、Googleドライブを使って画像ファイルから文字データを抽出する機能が便利だということを紹介させていただきましたが、また便利な文字起こしツールが誕生したと私のまわりで話題になっていたので紹介したいと思います。

そのツールは『AIメーカー』というサイトで公開されているサービスで、音声ファイルや動画ファイル、YouTubeにアップロードされている動画を読み込ませるとAIが自動で文字起こしをしてくれるというものなのです。

利用するにはTwitterのアカウントが必要となりますが、1日1回、5分以内(または10MB以内)であれば無料で利用できます。YouTubeのURLを入れるだけで文字起こしをしてくれるというのは非常に革新的。早速実際に試してみることにしましょう。

今回はANNニュースが配信しているこちらの動画の文字起こしをしてみました。

まずはサイトにログインし、動画のURLを入力して「YouTubeから文字起こしをする」というボタンをクリックします。

すると、30秒もかからずに文字起こしされたテキストデータが表示されました。

富士山に秋の訪れを告げる風物詩です富士山の麓山梨県の富士吉田市では夏の登山の終わりと秋の黄葉シーズンの始まりを告げる吉田の火祭りが行われました江戸時代から400年以上にわたって続く伝統行事でこの祭りは鎮火祭とも呼ばれ富士山が噴火しないようにと願いが込められているということです登山道入り口の神社へと続く道沿いに並べられた高さおよそ3メートルの大大松屋家元に井桁憎まれた大祭りともされた日が待ち中を照らし185000人の観客達は幻想的な雰囲気に酔いしれていました

さすがに改行や句読点は自動で入らないので、読みにくく感じてしまうかもしれませんが、お時間のある方は1分未満の動画なのでぜひ動画を再生しながらテキストに目を通してみてください。最後の方に少し誤字がある程度で、ほぼ完璧に文字起こしされていることがわかると思います。

これなら改行や句読点を追加し、明らかに間違っている箇所を修正するだけでしっかりした文章に仕上げられそうなので、一から文字起こしをするよりは大幅に作業時間を短縮できるはずです。

今回は『AIメーカー』というサイトの文字起こし機能を使ってみて、その精度の高さを体感しましたが、このサイトに限らず音声認識や文字起こしの技術はきっとすごいスピードで進化し続けているのでしょう。次はどんな技術に驚かされることになるのか楽しみです。

ウェブサイトの黒と白

白背景のウェブサイトでは黒色のテキスト、黒背景のウェブサイトには白色のテキストがよく使用されますが、テキストの黒も、テキストの白も、実は完全な黒、完全な白ではないことが多いのです。

完全な黒、完全な白のテキストは、ユーザビリティが落ちる原因のひとつ

背景が白100%のウェブサイトに黒100%のテキストを配置すると、コントラスト比が高すぎることによってユーザーの眼が疲れてしまうと言われており、テキストをしっかりと読んでもらうためにはこういったマイナス要素は排除しなければなりません。実際、多くのウェブサイトで白背景のウェブサイトにはダークグレーのテキスト、黒背景のウェブサイトにはライトグレーのテキストが使用されています。

コントラストのバランスには細心の注意を

上記のような背景色とテキストカラーのバランス調整は行ったほうが良いと言えますが、やりすぎるとコントラスト差が少な過ぎて視覚障害のあるユーザーに見えなくなることがあります。
注意をはらいながらコントラストのバランスを調整するわけですが、ユニバーサルデザイン(障害のある方でも公平に使えるデザイン)を優先するのであれば完全な黒、完全な白のテキストを使用するという選択も間違いではないのです。

参考:マツダウェブサイトでは黒にかなり近いグレーの背景色と、テキストのライトグレーのコントラスト比がかなり小さめに設定されています。


参考:トヨタウェブサイトでは白背景とダークグレーのテキストカラーに加え、小さいテキストにさらに明るいグレーを使用し、テキストが主張しすぎない工夫をしています。

SSDとは?│Web用語集

SSDとはソリッドステートドライブ(Solid State Drive)のことで、ざっくり言ってしまうとハードディスクドライブ(HDD = Hard Disk Drive)と同様にパソコンなどのデータを記録する装置です。
USBのフラッシュメモリにもSSDが使用されています。

近年はノートパソコンにもHDDではなくSSDが搭載されているものが出始めました。
どちらも基本的には同じように使用することができるのですが、SSDとHDDにはそれぞれ長所と短所があり、ノートパソコンを使用する方はその違いをしっかり把握しておいたほうがいいでしょう。

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

目次

他のサイトでの説明
SSDとHDDの違い
復習クイズ

●他のサイトでの説明

初心者向けのわかりやすい解説です。
http://www.toha-search.com/pc/ssd.htm

実物の写真も掲載されている解説ページです。
https://www.pc-master.jp/jisaku/ssd.html

WikipediaではHDDとの比較が充実しています。
https://ja.wikipedia.org/wiki/ソリッドステートドライブ

●SSDとHDDの違い

■速度
HDDよりもSSDの方が高速です。データの転送速度やパソコンの起動時間などはSSDの方がスピーディーです。

■音の大きさ
HDDよりもSSDの方が静かです。HDDはディスクが動く音が聞こえますが、SSDは動作音がほとんどありません。

■容量
SSDよりもHDDの方が大容量です。SSDも徐々に容量の大きいものが開発されていますが、HDDを超えることはなさそうです。

■価格
HDDよりもSSDの方が高価です。2016年5月の時点ではHDDが1GBあたり10円以下だったのに対し、SSDは27円~70円程度だとされています。ただしSSDはどんどん価格が下がってきています。

■寿命
SSDのデータ保持期間は10年前後とされるのに対し、HDDは磁気記録そのものなら100年以上保持されるとされています。

■省スペース性
SSDは非常にスペース性に優れていますが、HDDはディスクが必要になるため相応なスペースが不可欠です。そのため薄手のノートパソコンはSSDのものが多くなっています。

■省電力性
HDDよりSSDの方が省電力です。HDDはディスクの回転に常時電力を使いますが、SSDはデータアクセス時に大電力が必要となるものの、それ以外に電力を消耗しません。

■データ復旧
長らくHDDが使われていたことからノウハウも蓄積されているため、データ復旧の技術はHDDの方が確立されています。

これらを総合すると、HDDは大容量で丈夫だけど大きくて遅くてうるさい、SSDは速くて静かだけど容量も小さく壊れたら復旧できない可能性があるという、まさに一長一短となっています。

外で使う機会が多いノートパソコンはSSDはのものを、あまり持ち歩かないノートパソコンならHDDのものを、というように目的に合わせて選ぶといいでしょう。

●復習クイズ

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

テンプレート

WEBサイト制作におけるテンプレートとは、サイト制作で必要となってくる最低限または基本的な機能を搭載したプログラムのことを指します。
デザインの元となるレイアウトや仕組みが最初から備わっているので、掲載したい写真や文章を用意するだけでWEBサイトを作ることができます。
手軽な分、テンプレートには良いイメージも悪いイメージも出来てしまっているようですから、今回は、メリットとデメリットを併せて紹介します。

テンプレートのメリット

多くのテンプレートには、欲しいと思われる機能が備わっていて、流行りのデザインも取り入れています。とくに最近は、高機能なテンプレートが出てきているので、綺麗なサイトを安く作ることができます。
WordPressの場合は、さらに、テーマと呼ばれるテンプレートを選んで見え方を自由に変更することができます。
※注意:WordPressの投稿機能を使用してい部分以外のページは、再度情報を登録し直す必要がある場合もあり。

テンプレートの機能以上のこだわりが無ければ、手間はかかりますが、制作会社に依頼せずWEBサイトを作ることはできます。
もちろん、制作会社で設計して、デザインや仕組みを作るほうが、デザインも仕組みもより良いものに仕上がると思いますし、セキュリティなど専門的な知識が必要になる部分も安心だとは思いますが。

 

テンプレートのデメリット

「テンプレートは悪いものではない」という前提で、いくつかの欠点を挙げます。

まず、現在多くのサイトでテンプレートを使用していますから、閲覧者が「このWEBサイトの形は、どこかで見たことがあるぞ?」と、同じテンプレートを使用しているサイトを以前閲覧して覚えていることがあります。「素敵なデザイン」「読みやすい、情報を探しやすい」の前に、「見たことがあるデザイン」と感じてしまうことがマイナスイメージに繋がる可能性があります。

独自のカスタマイズが難しいことがあります。
「画像の表示する順番を、いつでも自分の好みの順番に変更できるようにしたい」とか「お知らせを複数に種類をわけて表示したい」などのご相談があります。テンプレートにない機能を追加すると想定外の動きや不具合が起きることがあります。デザインが崩れたり表示されなくなるなど、制作会社でないと対応が難しい状態になることがあるのです。

テンプレートは、手順に沿えば簡単に比較的安価にWEBサイトを用意できるのがメリットですが、他のサイトとイメージが被ってしまう可能性や不具合が出たときの対処が難しいのがデメリットでしょう。
費用面などから、制作会社に依頼してオリジナルのWEBサイトを作ることが難しい場合は、まずテンプレートのWEBサイトでスタートして見てはいかがでしょうか。
制作し、しばらく運用した後に、改めて制作会社に仕組みやデザインを相談することも可能です。場合によってはその方が目的と運用の現実に沿った仕組みやデザインに近づくのかもしれません。

ハードディスク(HDD)からの異音

パソコン本体が熱くなってファンの回転音が大きくなったり、大きいデータを移動させる時にハードディスク部分から音が聞こえたり、それまで聞こえなかった音が聞こえてくるようになったりしたら要注意です。すみやかにバックアップを取りましょう。

異音が聞こえるという状態は、一時的にハードディスクの調子が悪くなっているという状態ではなく、すでに物理的な異常が発生していて、いつ壊れてもおかしくない状態になっていると考えたほうがいいです。

以前私のノートパソコンが壊れてしまった時は、突然起動しなくなったのですが、壊れる前に異音が聞こえたなら、バックアップを取ることができたはずです。
私の場合は、急ぎの用事があり、慌てて新品のパソコンを購入してしまいました。
どうにか壊れたパソコンのハードディスクからデータを吸い出すことができたのでよかったのですが、本来だったらしっかり検討してパソコンを買い換えたかったと思っています。

使用頻度にもよるのでしょうが、ハードディスクの寿命は3年程度だとも言われています。
移動時の衝撃などで負荷をかけるノートパソコンのほうが早くダメになってしまう気がします。

ハードディスクの異音については以下のサイトの説明がわかりやすかったので参考にしてみてください。

パソコンと音 第2回「HDDの音について」(4回連載) / マイベストプロ佐賀

三分割法を活用した構図の例

写真やデザインを美しく見せる「三分割法」

絵画や写真、デザインにおいてより調和の取れたバランスを保つことができる「三分割法」というテクニックがあります。

三分割法のグリッド
参考:三分割法のグリッド

三分割法は古代ギリシャのルネッサンス時代から用いられていると言われ、一枚の構図を等間隔に引いた2本の水平線・垂直線で画面を9等分し、水平線と垂直線が交差するポイント(画像赤丸部)に、注目を集めたい要素を配置するとより安定した構図が得られるというものです。

 

三分割法とウェブデザイン

三分割法はウェブデザインの分野にも活用することができます。表示サイズによってパーツの大きさが変わるレスポンシブデザインのウェブサイトにおいても、9等分のグリッドを意識したレスポンシブコーディングを行うことによって十分な効果を得ることができます。なお、スマートフォンサイトの場合は表示サイズの横幅が狭いため縦に3分割することは難しいケースが多く、構成に対しての三分割法の適応は難しいと言えます。

三分割法を活用したウェブデザインのグリッド構成
参考:三分割法を活用したウェブデザインのグリッド構成

余談になりますが、iPhoneで写真を撮影するときも三分割法のガイド線が表示できます。

iPhoneの三分割グリッド
iPhoneの三分割グリッド

「設定」→「カメラ」内にある「グリッド」という項目をタップすると線画表示されます。
身近なところではこういったところから、三分割法を意識してみると良いでしょう。

map

今まで無料だったものが毎月数十万円の請求に

インターネット上には無料で使えるツールがたくさんあります。注意しなければいけないのは、無料なものは無料でなくなる可能性があることです。

Googleマップの料金改定

無料サービスで有名なGoogleマップ※は2018年の6月に料金改定を行いました。マップのある機能なのですが、1日25000表示まで無料だったものが月間で28500表示(1日あたり950表示)まで無料という大きな変更を実施し、無料の範囲が約26分の1になってしまったのです。代わりに毎月200ドル分は無料で使えると明言していますが、このまま使い続けると月額数十万円の支払いになってしまうという悲痛な声がたくさん聞こえています。

※厳密にはGoogle Maps Platform

 

料金改定の対象となる地図

ルートを出す地図・複数のピンが立っている地図・色を変えている地図・ストリートビューなどカスタマイズした地図など対象なので、マップを導入している方は、一度自分のサイトをご確認ください。

 

すぐにお金を請求されるか

すぐに請求されることはありません。その代わり、「このページではGoogleマップが正しく読み込まれませんでした。」というメッセージが表示されます。
表示を再開するためにはクレジットカードの登録が必須です。

 

課金例

ちなみに、複数ピンが表示される地図が1日1万回、月間30万回表示されていたサイトの場合、今まで無料の範囲でした。
価格改定後は下記計算で1620ドルが毎月請求されます。

料金は価格表より、下記3つの合計金額で1620ドルになる。
1.700ドル(100000回までは1000回あたり7ドル)
2.1120ドル(残り200000回分は1000回あたり5.6ドル)
3.毎月200ドルが無料

200ドル無料といっても1620ドルになってしまうのです。

困った
「毎月1620ドルは厳しい」

 

 

代替サービス

Mapbox
https://www.mapbox.com/
世界的にはGoogleマップの代替サービスとして認知度が上がっています。Googleに比べると従量使用に関する費用が安いです。ただ、日本の情報があまり出回っていません。

国土交通省地理院タイル
https://maps.gsi.go.jp/help/use.html
国土地理院の地図データを利用できます。使い勝手やデザイン、導入の簡易さはGoogleMapに劣りますが気になるサービスです。

ほかにも複数ありますが、今の時点ではGoogleマップが一番使いやすいのは間違いありません。

 

伝えたいこと

値上げをしたGoogleを非難しているわけではありません。今までよく無料で公開していたな、というのが正直なところではあります。ただ、サービス利用者としては今無料で使えている各種サービスがどういうビジネスの枠組みで動いているのかを把握した上で、使えなくなることも考慮して使うことをおすすめします。


価格関連の情報は2018年8月時点のデータとなります。

フィードとは?│Web用語集

フィードという言葉自体にはいろいろな意味があります。
そもそもは「与える」「供給する」というような意味の言葉ですが、サッカーで前線にいる選手にパスを出すことや、ワープロソフトで改行や改ページすることもフィードといいます。

そしてWebにおいては、Webサイトの概要やコンテンツ全体を配信用に加工した文書またはそのフォーマットのことを指し、主にブログサイトやニュースサイトが更新情報などを配信するのに利用されています。
また、上記のような使われ方をする場合は「ニュースフィード」「ウェブフィード」などと呼ばれることもあります。

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

目次

他のサイトでの説明
フィードの使われ方
復習クイズ

●他のサイトでの説明

「WEB担当者フォーラム」でも解説されています。
https://webtan.impress.co.jp/g/フィード

「IT用語辞典」でも解説されています。
http://e-words.jp/w/フィード.html

●フィードの使われ方

フィードは主に「フィードリーダー」と呼ばれる専用のソフトやアプリ、Webサービス、フィードリーダー機能を有したブラウザなどを利用して読まれます。

更新情報を受け取りたいブログサイトをフィードリーダーに登録すると、ブログサイトに新しい投稿があるたびにフィードリーダーに通知が届き、実際にブログサイトを開かなくても更新内容を知ることができます。

例えば、ランガレウェブをフィードリーダーのスマホアプリで登録すると、記事が以下のように一覧で表示されました。


※フィードリーダーにはいろいろな種類があります(画像は『RSS Reader – Simple RSS Reader』)

そして新規投稿があるたびにプッシュ通知で更新を知らせてもらえるので、新しい投稿をなるべく早く、欠かさずに閲覧したい人にはとても便利です。

近年はSNSの利用者が増え、ニュースサイトやブログサイトの更新情報をTwitterやFacebookなどでも知ることができますが、特に個人のブログなどの更新情報を知るのに役立つかと思います。

また、フィードリーダーのことは「RSSリーダー」と呼ぶこともあります。RSSという用語についてはまた改めて紹介する予定です。

●復習クイズ

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

若年層はWeb広告をきちんと見ているらしい

インターネットやSNSをしていると、検索結果一覧に表示されるリスティング広告や、ポップアップで表示されるバナー広告、動画が再生する前に表示されるCMなど、いろいろな種類のWeb広告を目にします。

でも、見たい情報があるのに、それを邪魔するかのように表示される広告はときには鬱陶しいもの。わざわざ広告表示をブロックしてくれるスマホアプリを入れてネットサーフィンをする人もいるようですし、広告がないほうが嬉しいという人のほうがきっと多いのではないでしょうか。

ところが最近Webの広告関係で仕事をしている友人と話をしている時に聞いたのですが、若い世代ではSNSの利用中に表示されるWeb広告について好意的な印象を持ち、スキップしたりせずにしっかり目を通す人が増えているそうです。

その理由は、最近のWeb広告は閲覧者の傾向を分析し、興味に合わせた広告が表示されるようになっているから。しかも精度がどんどん上がっているため、「広告=いらない情報」ではなく「広告=自分にとって有益な情報を的確に教えてくれるもの」に変わってきているのだそうです。

私も今までは広告というだけでスキップしてきましたが、意識してInstagramのストーリーに表示される広告を見てみると、面白そうなスマホアプリ、お得なビアガーデン、好きなお菓子、便利そうなWebサービス、楽しそうなイベントなどの広告が表示され、いずれも割と興味深いものでした。

もちろん今回聞いた話は統計データがあるわけではなく、「そんな話もあるよ」という程度のものではあります。確かに広告表示の精度が上がっていけば、広告を嫌がる人自体が減っていくかもしれないと思えました。

ウェブデザインにおける黄金比と白銀比

無意識のうちに美しいと感じる「黄金比」と「白銀比」。

黄金比は、ギリシャのパルテノン神殿の構造や、APPLEのロゴなどに用いられていて《近似値1:1.618》で表されます。
白銀比は、A版B版の用紙サイズや、法隆寺、風呂敷など日本古来からのものに用いられていて《近似値1:1.1414》で表されます。

参考:黄金比とモナ・リザ
参考:白銀比と用紙サイズ

 

ウェブデザインへの応用

この美しいとされる比率はウェブサイトのカラム分けのグリッド比率や、サムネイル画像の縦横比率、サイト内で使用されるフォントサイズの大きさの比率など、さまざまな面で使用されています。

参考:黄金比とグリッド比率

スマートフォンサイトは1カラムレイアウトが一般的ですが、その際のバナーやボタンの比率決定にも効果的ですし、パーツや構成サイズを決定するひとつの指標として活用できます。

ハッシュタグとは?│Web用語集

SNSの話をしているとよく耳にする単語「ハッシュタグ」。聞いたり見たりしたことはあるけど、意味や役割はいまいちわからないし、使ったこともないという人は意外と多いようです。

ハッシュタグとは「#(半角のシャープ)」を頭につけたキーワードのことを指します。

主要なSNSであるTwitter、Facebook、Instagram、YouTubeなどではハッシュタグを利用することができ、ユーザーの過半数がハッシュタグを使いこなしているといわれています。

ハッシュタグについてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
ハッシュタグの役割
復習クイズ

●他のサイトでの説明

ハッシュタグについてのわかりやすい解説です。
http://d.pasona.co.jp/social/what-is-hashtag-in-business/

Wikipediaにも項目があります。
https://ja.wikipedia.org/wiki/ハッシュタグ

説明ではありませんが、Instagramでよく使われているハッシュタグの一覧です。
https://dongabyacho01.com/instagram-3-749

●ハッシュタグの役割

ハッシュタグをつけるとそのキーワードにリンクが設定され、クリックをすると同じハッシュタグがついた投稿を閲覧することができます。

例えばこちらの投稿をご覧ください。

サントリーの「プレミアムモルツ」の公式Twitterアカウントがハッシュタグを使ったキャンペーンを展開しています。

ハッシュタグ「#私の神泡」をつけて感想をツイートするとプレゼントが当たるキャンペーンに自動で応募されるというもの。このツイート内のハッシュタグをクリックすると、プレミアムモルツの「神泡」を体験した人の感想がズラリと表示されます。

企業のSNSでキャンペーンを行う際には現在非常に有効な方法のひとつだといえるでしょう。

ほかにも、例えばイベントの主催者が「SNSに投稿するときは『#○○○○』というハッシュタグをつけて投稿してください」とアナウンスすれば、そのハッシュタグを検索するとイベント参加者からの投稿を絞り込んで閲覧しやすくなります。

ハッシュタグをつけることによって情報を検索で探しやすくなるため、多くの人に投稿を見てもらいたい人はハッシュタグをつければ効果的に見てもらえる可能性を高められますし、検索する側も最初から情報が絞り込まれ、効率よく見たい情報を探すことができるようになるのです。

●復習クイズ

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

APIとは

以前の記事でサラッと書いてしまったのですが、「API」と言われてもどんなものかイメージできるでしょうか?
日常で使う言葉では無いため、説明が難しいですよね。

Wikipediaでは、
「アプリケーション プログラミング インタフェース(API、英: Application Programming Interface)とは、ソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様である」
これでは、よくわからないですね。

ある1つの機能に特化したプログラムで、ソフトウェアの機能を共有する仕組みのことをアプリケーション プログラミング インタフェース、略称APIと呼びます。
「ソフトウェアの機能を共有すること」と簡単に言い換えてもいいでしょう。

エンジニア(プログラマ)の代わりに、アプリケーションに情報や指示を出してプログラミングしてくれるのがAPIです。

インターフェイスという言葉については後日記事にまとめようと思っています。

そして、Webサービスを操作するAPIをWeb APIといい、身近なものとしては下記に3つ挙げてみました。

Google Maps

皆さんおなじみ。

Instagram

FacebookのAPIを使用しています。

じゃらんwebサービス

日本で最初にAPIを公開したサービスの1つです。

APIは基本的に無料で使用できるものが多く、APIを提供している企業のサイトで、登録の申請などすることで使用することができます。

「フィッシングメールには、くれぐれもご注意を」

最近、私のYahoo!メールのアカウントにこのようなメールがよく届いているので紹介したいと思います。

件名は「ご利用のApple IDのパスワードがリセットされました」となっていて、差出人の名前も「Apple」になっています。フッター部分にもアップル社の住所が入っていますね。これだけ見たら本当にAppleのアカウントが乗っ取られて、パスワードをリセットされてしまったのではないかと心配になってしまいます。

でもこれはいわゆる「フィッシングメール」で、リンク先をクリックしてしまうとパスワードやクレジットカードなどの情報が盗まれてしまう可能性があり、大変危険なメールなのです。

この手のメールがフィッシングメールであることの見破り方ですが、今回の例だと差出人のメールアドレスまで確認したらドメインがAppleではなく別のものになっていましたし、文中のリンク先URLもApple以外のサイトになっていました。そしてフッターに入っている「Apple ID」「サポート」「プライバシーポリシー」の3つはリンクの設定がありませんでした。

パスワードを変更した場合や、不正なログインがあった場合には実際にこのようなメールが届くこともありますが、その場合は必ずメールアドレス、リンク先のURLがともにAppleのドメインになっているはずです。最近はSNSアカウントの乗っ取りなどが非常に多いので「本当にパスワードがリセットされたのかも」と思ってしまいがち。その点まで計算された巧妙かつ悪質なフィッシングメールです。

ただ、もしリンク先をクリックしてしまったとしても、最近はブラウザでアクセスをブロックしてくれることが多いです。今回もあえてクリックしてみると、以下のような警告が出て危険なサイトへのアクセスをブロックしてくれました。

この警告が出れば、メールが本物だと信じてクリックしてしまった人もフィッシング詐欺の被害にあうことはないでしょう。

私は以前にリンク先のフィッシングサイトを見たことがありますが、本物のAppleのウェブサイトに掲載されている画像をたくさん使用し、いかにも本物のAppleのサイトのように作られていました。ブラウザでブロックされずにサイトが表示されてしまったら、用意されているメールフォームから自分の個人情報を送ってしまう人もいるかもしれません。

この手のメールが届いたら、差出人のメールアドレスやリンク先のURLをしっかりチェックし、リンク先を開かないように気をつけてください。

これからはロゴもレスポンシブに

スマートフォンをはじめとする多端末表示にウェブサイトを対応させる「レスポンシブデザイン」についてはこのブログでも触れてきましたが、多様な表示サイズに対して表示を変えなければいけないのはウェブサイトのみではなく企業ロゴも同じという考え方が広まっており、画面サイズに対して適切な形へ姿を変えるロゴは「レスポンシブロゴ」と呼ばれています。

参考:有名ブランドのレスポンシブロゴ

レスポンシブロゴを作成することを前提に、ロゴタイプをシンプルなものに変える作業を長期間かけて行った企業もあります。
あらゆるロゴタイプは歴史的に見ても「よりシンプルに」なっていますが、これはロゴを表示する媒体の「デジタル化」も大きな要因のひとつです。

参考:ロゴデザインの変遷

ウェブサイトやロゴに続いて、ウェブ上で展開される「広告」にも、レスポンシブ化の流れが生まれています。
表示媒体の多様かつ早い変遷の中で、どうブランディングやターゲティングを行うかが日々模索されているのです。

バグ?それともエラー?

バグとは

ソフトウエアの不具合(エラー)のことをバグ(bug)といいます。

・プログラムのバグ

プログラムが作成者や設計者の意図とは異なる振る舞いをする場合、または、その原因となる部分(想定されていないルールになっている部分)を指します。

・潜在バグ

不具合が表面化しなくても、プログラムの中に潜んでいる場合を指します。

・仕様書のバグ

プログラムだけでなく、仕様書の内容にそもそも矛盾や間違いがある場合を指します。

「バグ(bug)」とは「虫」の意味で、「人間が気づかないうちに発生・寄生し、悪いことをする」という意味が込められています。

デバッグとは

プログラムのバグを取り除くテストを、デバッグ(debug:「害虫駆除」の意味)といいます。

プログラムや仕様書のバグは、勝手に発生するわけではありません。不具合をすべてバグと呼ぶのは、少し乱暴でプログラム作成者が気がついていない不具合だけを、バグと呼ぶほうが正しいです。
また、構造化プログラミングの提唱者である計算機科学者のダイクストラ(1930‐202/オランダ)は、プログラマ(作成者)の自覚を促すために、「バグではなく、エラーと呼べ」と主張しています。

プログラムや仕様書のバグを取り除くにはテストが不可欠で、どんなもの(仕様書・プログラム)であっても必ず間違いがあると思いテストを行う必要があります。
たった一つのバグが原因になり、ユーザー情報が間違って登録されてしまうことや、支払いなどの金額が正確ではないなど、サービスの継続が難しくなることも多くあります。

デザインや使い勝手の良さを考えることも大切ですが、システムなどサービスの品質に関わるため、デバッグをしっかり行うことは非常に重要なのです。
デバッグは、サービスの信頼を落とさないための最後の砦です。

IFRAMEとは?│Web用語集

IFRAMEは「アイフレーム」と読み、「Inline FRAME(インラインフレーム)」の略になります。

Inline FRAMEはHTMLタグのひとつで、文書内にフレーム(枠)を作り、その中に別のテキストや画像などのコンテンツを配置することができます。

以下のようなものをInline FRAMEといいます。ランガレウェブの「私たちについて」のページを表示してみました。

いつも用語集の最後で表示している「復習クイズ」もIFRAMEを使用して表示しています。

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

目次

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

●他のサイトでの説明

実際の使い方まで初心者向けに書かれています。
https://ferret-plus.com/910

IT用語辞典にも掲載されています。
http://e-words.jp/w/iframe.html

IFRAMEを使ってできることが紹介されています。
https://techacademy.jp/magazine/5839

●使用例

「このページをIFRAMEで表示しておいて」
「IFRAMEを使いすぎてデザインがあまり良くないね」
「IFRAME内に他のサイトを表示させてるけど、許可は取った?」

●復習クイズ

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