本日は、無料のコードエディタであるBracketsのおすすめエクステンションを紹介していきたいと思います。Bracketsは、もともとはAdobeによりプロジェクトが設立されて、オープンソースのプロジェクトとして、多くの方がその発展に貢献をしています。 このBracketsの魅力は、なんといってもカスタマイズ性です。Bracketsの場合には、エクステンションと呼ばれる拡張機能があり、それを自由にインストールして、自分のコードエディタを自分の使いやすいように設定しておくことができるのです。 今回は、特にフロントエンドの開発をしていく上で、Bracketsに入れておいたほうが良いおすすめのエクステンションを紹介していきたいと思います。 Shizimily Multiencoding for

自分の力でWebサイトを作れるようになったら、テンプレート素材の活用をしてみましょう。 正しく知識がついていれば、テンプレート素材を活用することで作品を作るスピードもクオリティもぐっと上がるはずです。 そんなとき、いいテンプレート素材を探したいという方にオススメなのが、「Freebiesbug」です。 WebデザインのPSD（Photoshopデータ）やIllustrator素材、HTMLテンプレートなどを無料配布していて、デザインやコーディングで使える素材を探したいという方にピッタリです。 左メニューにカテゴリ一覧が載っていますので、目的の素材タイプにあわせて探してみて下さい。 欲しい素材が見つかったら、詳細ペ―ジを開いて、ダウンロードボタンからダウンロードしましょう。 全て無料なので、

婚約指輪オーダーメイドブランド｢SORA｣が昨年実施した、自作の風船を宇宙に打ち上げて、宇宙空間を背景に結婚指輪の写真を撮影するという｢手づくり気球de宇宙撮影プロジェクト｣。 昨年公開されたもので、公開当時も大変話題になりましたが、新緑の季節に見るとまた新しい感動が得られるので、ご紹介したいと思います。 指輪の知識はあれど、宇宙撮影の知識は皆無。 でも、オーダーメイドの商品を作る自分たちだからこそ、「オリジナリティ」にこだわりたい...。 その思いが詰まった手作り気球が飛び立ち、美しい地球の風景と共に指輪が飛び立つ動画は、本当に感動します。 撮影された写真は、Photo Galleryページにてクリエイティブコモンズライセンスで公開されていて、自由に使用することができます。 オーダーメイ

銀座三越で開催された「Go! Go! Office Workers! わたしらしくかがやく、はたらく」（4月13日～26日）というイベントに行ってきました。 このイベントは、テクノロジーで女性の活躍を応援するGoogle主催のWomen Willプロジェクトの活動の一環で、復職する女性を応援するという「#HappyBackToWork WEEKS」キャンペーンに関するものです。（詳しくは過去記事「働くママが輝く社会のために　～#HappyBackToWork WEEKS発表会レポート～　前編」をご覧ください。） インターネット・アカデミーを含む参画企業 52 社の活動を紹介するパネルがこのイベント期間中に銀座三越の催事場に展示されるという案内を頂いたので、本日はその様子をレポートしたいと思

スマートフォンで検索する人が急増している今、リスティング広告もスマートフォンを意識して配信することが必須になってきています。 しかしどうすれば、スマートフォン利用者を効率的に狙ったリスティング広告になるのでしょうか？ スマートフォン向けリスティング広告配信のノウハウについてみていきましょう。 スマホを意識してリスティング広告を出す必要性 リスティング広告は、検索エンジンで言葉（キーワード）を検索したときに表示されるテキスト（文章）形式の広告です。 表示されただけでは料金は発生せず、ユーザーにクリックされると初めて課金されます。 リスティング広告は、「検索された地域」や「時間」、「表示される期間」などを管理画面から細かく設定可能なところもその特長の一つ。 また、パソコンやタブレット、スマート

今、日本社会では女性の活躍が求められています。そして、女性の活躍にとってテクノロジーは強力な武器になります。 そして、最先端のテクノロジーを活用しているWebデザイン業界ならば、女性がライフスタイルに合わせて無理なく働き続けることができます！ 本日は、女性が今学ぶべきスキルとしてWebやITがオススメな理由をご紹介します。 日本社会の現状 世界中どこでも、女性が働き続ける上で大きな悩みの種になるのが、「結婚」「出産」というライフイベントです。 特に出産後しばらくは、身体を休めなければならない上に、赤ちゃんの世話にかかりっきりになります。育児に熱心な「イクメン」も増えて来たとはいえ、出産前後は仕事を休まざるを得ません。 また、復職する際に、会社側に復職ママをバックアップできる体制が整っている

プレゼン資料を作るときや、ちょっとしたコラムを書く時。 さくさくさくっとグラフを作りたいけど、Officeのグラフじゃつまらない...。 そんな時に使えるサイトが「BEAM」です。 このサイトを使えば、簡易なチャートグラフを手軽に作成することができます。 使い方はとっても簡単。 円グラフ、折れ線グラフ、棒グラフ2種類から好きなグラフを選択。 後は、画面右側に表示されているプレビュー画面の左に表示されているタブ（下図の赤矢印で示している箇所）をクリックすると、エクセルのようなシートが出てくるのでそこにグラフにしたいデータを入れるだけで、簡単にグラフが作成できます！ グラフのカラーは4色から選択OK。 完成したグラフは、FacebookやTwitterで共有したり、PNGの画像としてダウンロー

最近のGoogleの公式コンテンツ（レスポンシブ対応になっているもの）を見ていると、デザインが徹底した「モバイルファースト」なんだなと感じます。 「モバイルファースト」というのは、Web制作時に、スマートフォンなどのモバイルサイトを中心にコンテンツを考え、その後にPCなど他のデバイスへと対応させていく考え方のことです。 従来のWebデザインでは、PCで表示した場合のデザインをまず最初に考えて作ってきましたが、スマートフォンが普及した今、「モバイルファースト」でサイト制作を作る、という流れがWeb制作業界の中でも徐々に浸透をしてきています。 スマートフォンでインターネットをするユーザーはPCの約2倍！？ 視聴行動分析サービスを提供するニールセンによると、ほぼ毎日インターネットを利用する人のう

新緑も深まり、いよいよ春が過ぎ夏の気配を感じる今日この頃。 今日は、そんな今の時期にぴったりのさわやかなWebデザインのサイトをご紹介します。 アメリカのオースティンを中心に販売されている有機フルーツ水「Sway Water」のサイトは、レスポンシブWebデザインで作られたオシャレなサイトです。 マウススクロールにあわせて画像を動かし、奥行きや遠近感を表現したりする手法をスクロールエフェクトといいます。 そんなスクロールエフェクトと、パステルカラーの配色がとってもマッチしてますよね。 Googleマップのマーカーもサイトのデザインにあわせてカスタマイズされているのも、細部までこだわりを感じられていいですよね。 （マーカーの変更をしたい！という方は、インターネット・アカデミーのホームページ制

インターネットには様々な広告が溢れています。画像や音声を使った印象的な広告、検索すると表示されるテキストの広告など、種類を挙げるときりがありません。 今回は、企業と個人が提携する広告形式である、アフィリエイトの仕組みについてご紹介します。 アフィリエイト（成果報酬型広告）とは アフィリエイトとは、「提携する」という意味で、広告主である企業と、個人サイトやブログの運営者が提携して、商品やサービスを紹介・販売するサービスのことです。 サイトやブログを見たユーザーが広告をたどり、会員登録をしたり商品を購入するなど、一定の成果が上がった場合に、当該サイト運営者は報酬（広告収入）を得ることができます。 企業もサイト運営者も得をするアフィリエイトの仕組み 企業がサイトやブログを運営し、ユーザーを惹きつ

今回はHTML5.1で新しく加わる要素の一つであるpicture要素について解説していきたいと思います。HTML5.1は2016年9月の勧告を目指して動いている仕様ですが、picture要素はすでに多くのメジャーWebブラウザが対応してきていますので、実装結果もテストしやすくなっています。Webブラウザの対応状況は「Can I Use ...」で確認ください。 picture要素とは レスポンシブWebデザインで画像を扱う際に、デスクトップ向け、タブレット向け、モバイル向けと、それぞれの画面解像度に最適化された画像を扱うのに苦労をした経験があると思います。デスクトップ用に用意した横幅2,000pxの画像をモバイルサイトでもそのまま使っていては読み込みに時間がかかってしまい、大変ですね。そこ

お花見といえば4月中旬の染井吉野(ソメイヨシノ)、という方も多いかもしれませんが、私は晩春から咲く八重桜が大好きです。 そして、その八重桜が、今新宿御苑で見ごろを迎えています。 インターネット・アカデミーの新宿校から徒歩すぐのところにある新宿御苑の新宿門では、門前からでも八重桜の代表種である関山（カンザン）がボンボンと咲いているのが見えます。 新宿御苑の桜のベストシーズンは今！ 新宿御苑には、桜だけでも約65種、1100本の桜が植栽されているため、2月の寒桜から始まり、4月下旬までは多様な品種の桜を長きにわたって楽しむことができます。 ちょうど晩春にあたる今は、花見客の混雑のピークも過ぎ、広々とした公園内で新緑と八重桜のコントラストをゆったりと楽しむことができます。 春の日差しと自然の綺麗

Photoshopで画像をぼかした状態に加工するのは難しくありませんが、JavaScriptとCSSでぼかし加工をすることができれば、アニメーションを付けたり、ぼかしの微調整をソースコード上で行うことができて便利です。 今日は、背景画像にぼかし加工をかけることができるjQueryを紹介している「Background Blur」のサイトをご紹介します。 Background Blur の使い方 まずは、必要なファイル一式をダウンロードする必要があります。 GitHubのbackground-blurのページからファイルをダウンロードしましょう。 jQueryを適用したいHTMLファイルに、下記の // <pre

アドネットワークやリスティングと言ったインターネット広告が注目される一方で、メールマガジンのような昔ながらの広告の良さも昨今では見直されてきています。 今回は、広告としてのメールマガジンの価値や有用性についてご紹介します。 メールマガジンとは メールマガジン（メルマガ）とは、Eメールを使って継続的にメッセージを発信するサービスのことです。 日常でインターネットを使うことが当たり前になった現代では、ほとんどの方が携帯電話やスマートフォン、パソコンなどで、メールをチェックしているはずです。 インターネットが公共空間であるとするなら、メールの受信箱はいわばユーザー個人にあてられた私的な空間。この私的空間に直接届くということが、メルマガの最大の特徴です。 メルマガの読者になってもらうためには、まず

こんなニュースサイトは今までになかった！ビジネスにも使える！というサイトを本日はご紹介します。 連日、何万社ものニュースメディアが世界中でニュースを発信していますが、同じトピックスが必ずしも各国で同じだけの重要度として報道されるわけではありません。 今日紹介する「Unfiltered.news」では、そんな風に世界で話題になっているにも関わらず、自分が住んでる地域では"注目度が低い"ニュースが視覚的に理解できるサービスです。 Unfiltered.news の使いかた サイトにアクセスをすると、国別に円形表示された世界地図が表示されます。 円の中には、特定の地域のニュースで言及されたニューストピックスがキーワードとして表示されています。キーワードのフォントサイズは、言及された回数によって大

前回の「HTML5.1は2016年9月に勧告？」で紹介したW3Cブログの「Working on HTML5.1」という記事について、前回の記事では触れることができなかった部分について記事を書いていきたいと思います。 仕様書のGitHub公開 W3Cは、かつては自前主義といいますか、外部のツールを使わずにチーム内で開発した独自のシステムを使っていました。W3Cが策定する仕様書も当然、W3Cのサーバー上で公開をしていました。しかし、HTML5.1ではGitHub上で仕様書を公開することにして、もっと広くフィードバックであったり、仕様の追加要望、さらには細かい誤字脱字の修正などに参加してもらい、多くの方に仕様策定の課程に携わって欲しいという狙いがあるようです。 仕様書のデザインも改善 いつから変

ドイツでは政府主導で進められている「第四次産業革命」こと「インダストリー4.0」。製造産業の効率化をもたらし、国際競争力を強化するなど、多くの期待がかけられています。 しかし、工場をインターネットで繋ぐこの試みには、IoTならではの問題点も潜んでいます。前回に引き続き、今回の後編では、「インダストリー4.0」に潜む落とし穴についてみていきましょう。 IoTは世界的な潮流。しかし... いま、世界の産業は大変革期に突入しています。 先進工業国が、デジタル化やインターネット化を取り入れた生産性の向上に本腰で取り組んでいるからです。 その代表的な例がドイツ政府が主導する「インダストリー4.0」であることは、前編でご紹介しました。 ドイツでは、「インダストリー4.0」に参加する企業は、差し支えのな

IoT（モノのインターネット化）とともに、日本の製造業関係者の間でいま、熱い注目を浴びている「インダストリー4.0」。 将来的には製造業に限らず、日本の産業全体に広く浸透するのではないかとも言われています。 インダストリー4.0とは インダストリー4.0とは、ドイツ政府が主導し、官民連携で進めている、第四次産業革命を起こすという国家プロジェクトです。 そのコンセプトは「スマートファクトリー（考える工場）」。 工場の設備をインターネットでつなげることで、工場内の情報や、工場と工場の間の情報をつなげ、製造工程全体を効率化し、革新をもたらそうというものです。 スマートファクトリーになると製造業はどう変わる？ ・データの連携 設計や部品の調達、生産、物流に至るまで、全てのデータが連携します。これに

2016年3月28日に、GoogleがGoogle General Guidelines（以降、Google検索品質評価ガイドライン）をアップデートしました。 品質評価ガイドラインとは、「検索結果の品質を評価するガイドライン」のことです。 このガイドラインに沿ったWebページを作成することができれば、強力なSEOを期待することができます。そんな品質評価ガイドラインについて、今日はご紹介します。 Google 検索品質評価ガイドラインとは 先にお伝えしておきますと、このガイドラインは、検索システムのアルゴリズムを示したものではありません。あくまでも、"Googleの検索結果が、Googleの理念を映したものになっているかどうかを評価するためのもの"です。 Googleは、検索エンジンのアルゴ

4月6日に、W3Cブログで「Working on HTML5.1」という記事が公開されていました。HTML5が2014年の10月に勧告されてから約1年半が過ぎていますが、これからHTML5.1の勧告に向けて、どのような作業があるか、どのような目標で取り組んでいくか、といったことが記載されています。 2016年9月に勧告？ ブログの中では、これからのHTML5.1のスケジュールについて触れられていました。W3Cの仕様書が勧告されるまでには、「草案(Working Draft)」→「最終草案(Last Call Working Draft)」→「勧告候補(CR: Candidate Recommendation)」→「勧告案(PR: Proposed Recommendation)」→「W3C

「ハンバーガーメニュー」という名称をご存知でしょうか。 スマートフォン用のサイトで良く見かける、メインメニューが格納されたメニューボタンのことです。 通常は三本の横線で表示されていますが、クリックしてメニューを開くと×ボタンに表示が変化する、というのが特長となっています。 そんなハンバーガーメニュー、ただ三本線と×とが切り替わるボタンよりは、変化のアニメーションがついていた方が、印象にも深く残りますよね。 本日は、そんなハンバーガーメニュー用のCSS3アニメーションコードを手に入れることができるライブラリ「Hamburgers」をご紹介します。 このサイトで用意されているのは、14パターンのハンバーガーメニュー用CSSアニメーションです。 どんなアニメーションがあるかプレビューしたい方は、

アイコンは、自分で作っても良いのですが、効率良く制作を進める上では、できれば良質な素材が手に入ると嬉しいですよね。 そんな方にオススメなのが、「IconStore」です。 なんと、このサイトでは、可愛くってシンプル、とっても使いやすいアイコンセットが、「無料」＆「商用利用OK」でダウンロードすることができます！ サイトにアクセスをすると、アイコン一覧が表示されます。 アイコンの探し方は、サイト上部の「Categories」からカテゴリ検索もできますし、キーワード検索をすることもできます。 気になるアイコンセットを見つけたら、クリックして詳細画面を出しましょう。 ファイル形式はpsd、SVG、ai、Webフォントなどアイコンセットごとに様々。 それらの情報をチェックしたら、「Download

ちょっとした隙間時間に、ついスマホに手を伸ばして検索したりアプリを使っているという方も多いでしょう。 そんな時、突然身に覚えのない高額料金の請求画面が表示されたら...どうしますか？ 今回は、スマートフォンで増えているワンクリック詐欺の手口と対処法についてご紹介します。 ワンクリック詐欺の手口 近年、スマートフォンにおけるワンクリック詐欺の被害が増加しています。 たとえば、以下のような状況に遭遇したら、それはワンクリック詐欺と考えて良いでしょう。 【ケース１】メールのURLクリック 知り合いではない人からEメールが来たが、件名に興味を惹かれたので開いて読んでみた。 そこに記載されていた外部サイトのURLをタップしたところ、「ご入会ありがとうございます」と書かれた画面が出現した。 しかも、そ

インターネット・アカデミーから徒歩すぐのところにある新宿御苑では、今まさに桜が満開。 枝もたわわになるほど咲き乱れている桜を見ると、今更ながら今年も新宿に春がやってきたんだなーと嬉しい気持ちになります。 連日多くの人で賑わって入り口では人がたくさん並んでいますが、どんどん入場するためそんなには待たずに入園できます。 約18万坪もある広い公園ですからたくさんの人がいても窮屈さを感じることもなく、どこで花見の場所を確保しようかと迷うくらいです。 何処を見ても、青葉と桜色とのコントラストが必ず目に入るくらい、今日は桜があちこちで満開に咲いていました。 ちなみに、新宿御苑の案内によると、4月上旬のソメイヨシノが咲き乱れる盛春（つまり今の時期）はもちろん、中旬から下旬にかけての晩春こそが、八重桜の見

情報をわかりやすく、そして視覚的に伝えるために表現されたものをインフォグラフィックスと言います。 難しい情報こそ、親しみやすく、そしておしゃれに表現されていれば、印象にも残りやすくなりますし、イメージも湧きやすくなります。 最近では広告などでもインフォグラフィックが用いられたイラストレーションを多く見かけますね。Webコンテンツとして活用している企業も珍しくありません。 本日は、インフォグラフィックスの一例として、ロンドン在住の中国人イラストレーターJing Zhangさんのポートフォリオサイト「Jing Zhang illustration」をご紹介します。 Jing Zhangさんのイラストの特徴は、小人の世界とプロダクトや都市、食品などが組み合わさった世界観にあります。 たとえば、こ

スマートフォンに感染し、情報漏えいなど数々の悪さを働くとされる「ウイルス」。 しかし、一般的には「ウイルス」と呼ばれているものの多くが、実は正確には「トロイの木馬」というマルウェアに分類されるのです。 何故こんな名前で呼ばれているのでしょうか？ また、トロイの木馬と普通のウイルスの違いとは何なのでしょうか？ 今回は、スマートフォンで被害が増えているトロイの木馬についてご紹介します。 トロイの木馬の由来 トロイの木馬は、元々はギリシア神話に登場する装置に由来して付けられた名前でした。トロイを滅ぼそうと戦ったギリシア人たちは、なかなかトロイが陥落しないのである策を練りました。大きな木馬を作り、これを置き去りにして、船で立ち去ったふりをしたのです。トロイの人々はギリシア人が去ったことを喜び、木馬

バンガロールは、「インドのシリコンバレー」と呼ばれていることは、このブログの読者の方にはもう当たり前になってきているかもしれません。サンフランシスコのリサーチ会社であるCompass社が2012年から毎年発表しているスタートアップエコシステムランキングの2015年版で、バンガロールは世界で2番目に成長しているスタートアップ都市としてランクインしました。私の肌感覚としても、バンガロールで会う人会う人、皆さんがスタートアップを志しているような印象を持つほど、起業ブームとなっています。 そこで、今回、インターネット・アカデミーのインド支店の新たな取り組みとして、スタートアップミートアップを実施してみました。ちょうど、インド支店がある場所は、スタートアップ企業の多いエリアでもありますので、今回の開

もはやインターネットの世界では1年に一度のお祭りと化しているエイプリルフール。 今年も各社から面白いWebコンテンツが期間限定公開されましたのでご紹介します！ 1.「ドローン送迎」開始します https://welove.expedia.co.jp/recommendation/16499/ 世界最大の旅行予約サイト、「エクスペディア」がドローン送迎をはじめました。 玄関先から空港まで、荷物はもちろん旅行者までもドローンで空から送迎してくれます。 クーポンコードは「APRILFOOL16」。 最後にちゃんとネタ晴らしした上で通常のコンバージョンポイント（旅行予約）も用意しているので、LPとしても機能しています。 2.ポテトチップス コンソメ W（ワロス）パンチが登場！ http://www

2016年1月29日、日本銀行がマイナス金利の導入を決定しました。 マスコミでも大きく取り上げられ、「住宅ローンなどの借り入れには有利」とする一方で、「庶民の預金金利はマイナスにならないのか？」など、様々な憶測が飛び交っています。 そんなマイナス金利導入にあたって、注目を浴びているのがFinTech（フィンテック）です。 今後、銀行業務のコスト削減のためにフィンテックの開発が一層進むとみられています。 今回は、いま注目を浴びているフィンテックとは何かについて触れ、マイナス金利との関係についてもご紹介します。 FinTech（フィンテック）とは？ FinTech（フィンテック）とは、金融（Finance）と技術（Technology）を組み合せた造語です。金融や財務サービスなどでITを活用し