突然ですが、「Webスクレイピング」という言葉をご存知でしょうか。 例えば、現存するWebサイトの一部分の要素を取り出して、そこをスマホ向けに改修するとします。その際、Webサイトの該当部分の情報・データを集めてきて、集計し、使える形に整形し直すことが可能なのがWebスクレイピングです。そして、Webスクレイピング専用のツールのことを「Webスクレイピングツール」といいます。 仮に、スクレイピングツールがなかったら、自らインターネット上に膨大な情報の中から、目的のデータを探し出し、抽出して、手作業で集計・整形しないといけません。 ただ、その際、Webスクレイピングツールであれば、Web コンテンツを自動で取得できるので、アッという間に解決することが可能です。このツールは、業務上、大幅な工数削減に役立つなど重宝します。 そこで本記事では、このように便利なWEBスクレイピングツールについて、概

Google検索エンジンの検索結果画面は日々テストが繰り広げられており、変化し続けています。その中には、今回お話する「強調スニペット」関連でのアップデートも多く含まれます。その背景として、米国でのユーザー行動の変化、特に「音声検索」の増加が、強調スニペットと密接に関わっていることも挙げられます。そのため、米国ではSEOにおける注目トピックとして、強調スニペットを扱うケースが非常に増加しています。 この強調スニペットですが、まだまだ日本で本領域をトピックとして扱うケースは少ないと言えます。ですが、2017年5月に行われた開発者向けイベントGoogleI/Oにて、日本にも音声検索デバイス“Google Home”が上陸すると発表されており、今後日本でも音声検索が増加することが予想され、それに伴い、検索結果における強調スニペットの位置付けがますます重要になる可能性もあります。 今回は、強調スニペ

画像のリサイズや、特定のWebブラウザのテキストのコピー＆ペースト、決まった形式でのファイル名の変更など、日々Mac上でルーティンになっている作業はどれだけありますか？ Macに標準で入っている「Automator（オートメーター）」というアプリを使えば、さまざまな方法で作業を自動化できるようになります。数分掛かっていた作業が数秒になれば、本当に大切な仕事に集中できます。 そこで今回は、Macの操作を自動化できるAutomatorの概要や詳しい使い方、実践例などをご紹介いたします。設定によってはSiriのように音声だけで作業をコントロールできるので、ぜひ活用してみましょう。 Macの標準アプリ「Automator（オートメーター）」とは？ Automatorは、様々なワークフローを自動化して簡単に作業を効率化できる、Macの標準アプリケーションです。単純なドラッグ＆ドロップ操作で自動化レシ

電子印鑑（デジタル印鑑）とは 電子印鑑とは、電子書類に対してPC上で押印できる印鑑を指します。 例えば、Excelで作成した見積もりに押印して顧客にメールで送信する際、従来であれば一度印刷をして上長や自身の印鑑で押印を行う必要がありました。電子印鑑であれば、そのような印刷の手間を省いて、パソコンでの操作のみで作業を完了できます。 テレワーク推進のため電子印鑑が必要になった 長期化するコロナ禍の中、官民いずれにおいても「テレワーク推進」「業務の非対面化」が強く求められています。しかしその中で、日本の社会に根強く残る「はんこ文化」が課題として生じています。 例えば、請求書や契約書にはんこを押さなくてはならず、そのためだけにテレワークを中止して出社したことがある人もいるのではないでしょうか。Adobe社が行った調査によると、このようないわゆる「はんこ出社」の経験を持つ人はビジネスパーソンの6割以

ライターや編集者など文章の執筆が仕事の方にとって、テキストエディタ選びはとても大切です。特に、Webメディアで執筆する方であれば、HTMLタグやマークダウン記法を用いて原稿を仕上げる機会が沢山あります。 PCやスマートフォンにプリインストールされているテキストエディタでは、HTMLタグやマークダウンを手動で入力しなければならず、入稿作業が面倒に感じる方もいるのではないでしょうか。 そこで、オススメのテキストエディタをご紹介します。Appleが優れたアプリを表彰する「Apple Design Award 2017」にノミネートされた「Bear」というテキストエディタアプリです。 テキストエディタ「Bear」とは Bearは、多彩な機能性に特化したテキストエディタアプリです。 iOS版、Mac OS版それぞれリリースされており、iPhone、iPad、Macで利用できるという特徴があります。

ブログやYouTube、Instagramなど、Webマーケティングで様々な手段を講じている企業も増えてきました。しかし、複数のメディアを使い分けているにもかかわらず、Podcastについては未対応のところも多いのではないでしょうか。 Podcastは、今もなお人気を誇っており、スマートスピーカーの設置急増によりさらに注目されています。配信が面倒だと思われがちですが、今回紹介するアプリ「Anchor」を使えば、簡単に高品質なPodcast番組の制作が可能です。 そこで今回は、あっという間にPodcast配信できる「Anchor」で、自分のチャンネルを配信する簡単3ステップを紹介します。面倒どころか、簡単すぎて何番組も連続して作れてしまうかもしれません。この記事で、作り方をマスターしましょう。 なぜいま「Podcast」なのか？ ポッドキャストはいわば音声版ブログで、音声や動画メディアをプッ

Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。 Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。 そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。 CSSグリッドでレスポンシブデザインを実装しよう イメージ画像 floatやflexboxのような「1次元」レイアウトに対して、「2次元レイア

コーポレートサイトをはじめとして、様々なWebサイトに、フォームはなくてはならないものです。しかし、デザイナーにとって、フォームのレイアウトはどちらかといえば*「手間」*に感じるのではないでしょうか。 フォームデザインは、未だにTABLEレイアウトを使ったり、場合によってはFloat、もう少し先駆的なデザイナーならFlexboxを使っているケースが多いようです。しかしながら、CSSグリッドによるデザイン手法はWebデザインの定着となりつつあるので、フォームのレイアウトもCSSグリッドを使う手法が主流になるでしょう。 そこで今回は、CSSグリッドを使ってフォームデザインを簡単にする方法をご紹介します。 厄介なセルの入れ替えも、CSSグリッドを使えば比較的簡単に行うことができます。ぜひ、その考え方や方法について確認してみましょう。 フォームのレイアウトで生じる問題点 アンケートや問い合わせなど

Flexboxを使ったレイアウト手法に代わって、新たに注目を集めている手法がCSSグリッドを使ったレイアウトです。 従来のfloatを使った回り込みレイアウトやFlexboxを使ったレイアウト手法は、いわば「1次元的」なレイアウトでした。それに対して、縦横に配置する*「2次元レイアウト」*であるCSSグリッドは、Webデザインのパラダイムを大きく変えたという点で重要な役割を担っています。 CSSグリッドは、ほぼ全てのモダンブラウザで使用できるので、2018年以降もWebデザインにおけるレイアウト手法より定着していくはずです。しかし、これまで出てきている多くの情報が、実践的なものというよりは、どちらかと言えば概念的なものばかりです。 そこで今回は、「CSSグリッド」を使ったレスポンシブ対応の3カラムサイトのチュートリアルをご紹介していきます。 CSSグリッドをより実践的なサイト制作に当てはめ

CSSグリッドは、これまで登場したTABLEレイアウト、Floatによる回り込みのレイアウト、そしてFlexboxを使ったレイアウトのどのレイアウト手法よりも直感的に扱える、注目のモジュールです。 2017年に入って、macOSやiOSがCSSグリッドに対応する形でSafariに搭載され、いよいよ全てのモダンブラウザで使用することができるようにもなりました。 参考： これで分かった！10分でほとんど理解できる「CSSグリッド」の基礎 ところで、CSSグリッドレイアウトの基本的な使い方に関してはなんとなく理解できた人もいるかと思いますが、もう一段階先に進みたいと思っている方もいるのではないでしょうか。 実際、CSSグリッドは非常に柔軟で拡張性が高いので、知っておいて損はないTips(コツ)がたくさんあります。 そこで本稿では、CSSグリッドをより使いこなすための4つのTipsをまとめていきま

Webデザインを学び始める人が最初に立ちはだかる壁が、段組としてのレイアウトです。 Webデザインの黎明期は、TABLEレイアウト、そしてfloatを使った回り込みレイアウトが主流でした。しかし、TABLEレイアウトは読み込み時間が長くなる傾向になり、floatを使ったデザインはブラウザによっては回り込みがうまくいかず、段組が崩れてしまうなど、初心者を悩ませる問題がたくさんあったのです。 そこで2012年頃から登場したのが、Flexboxを使ったレイアウトです。それまでにさまざまなCSSフレームワークが登場し、多くのフロントエンドエンジニアやWebデザイナーはfloatでのレイアウトの問題を解決するためにこうしたフレームワークを活用していました。 しかし、Flexboxでのレイアウトも、場合によってはレイアウトがはみ出してしまうことがあったりと、万能ではありませんでした。その問題を解決する

デザインに関する法則とは違って、「UX」はどのように勉強すれば良いのか悩んでいる方もいるはずです。 しかし、UXの世界にも、知っておきたい*「基本法則」*が存在します。長年現場にいれば当たり前のことかもしれません。しかし、改めて確認することで新たな発見もあるでしょう。 今回は、UXの学習で知っておきたい5つの基本法則を紹介します。すでにご存知の方はもちろん、UXについてあまり知らない方も、ぜひチェックしてみてください。 UXの学習で知っておきたい5つの基本法則 1. 系列位置効果 *系列位置効果(シリアルポジションエフェクト)*とは、単語リストなどのリスト形式で提示されたものを記憶する際に、そのリストの位置によって、それぞれの項目の記憶維持状態に大きな差異が見られる現象を指します。 このうち、比較的最初のほうにある単語の方が記憶されやすいことを「初頭効果」、終わりに近いものをよりよく記憶し

運営しているホームページやWebサイトで、OGP設定は行っていますか？ OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。 そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。 OGPとは OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。 上の赤枠のように表示を目立たせることが可能で、URLだけの場

グラフィックデザイナーの中には、美しいホームページを作りたいけれど、ソースコードを見ることすら苦手…というひとも多いのではないでしょうか。 確かに、ホームページを作成するには、HTMLだけでなくCSSやJavaScript、そしてよりリッチでインタラクティブにするためにはプラグインやライブラリの知識も必要です。 しかし、グラフィックデザインのような印刷物をデザインする感覚でホームページを作成することができるツールがAdobeからリリースされています。 それが、Adobe Muse(ミューズ)です。 グラフィックデザイナーだけでなく、コーディングが苦手なかた、コーディングが面倒だと思っているかたにはぜひ使ってほしいソフトウェアです。 今回は、*「面倒くさがりやのためのAdobe Muse入門」*と題して、どんなことができるのか、どうすれば簡単に美しいホームページが作れるのかを解説していきます

インターネット関連の技術の進化によって、2017年に入ってWebデザイナーにも新たな変化が訪れようとしています。 これまでにもグラフィックからWeb、デスクトップからモバイル、UIからUXなど、次々にデザイナーが身につけなければならないスキルの種類や量が増えています。 それに加えて、最近ではデザイン思考やプロセスデザインなど、ビジネスのフィールドにおいてもデザイナーの役割が大きく注目されており、デザインを中心に据えた考え方から生み出されるプロダクトも増えてきています。 今回は、2017年にWebデザイナーが認識しておくべき5つの変化をご紹介します。 2017年にWebデザイナーが認識しておくべき5つの変化 1. デザイナーとエンジニアの境界線が消えていく 10年前の静止画的なホームページとは違って、Webサイトを開けば、様々なマイクロアニメーション、インタラクティブなボタンやメニューなど、