2016.11.21
Webデザインの世界では、日々、新しい技術が開発され、新しいトレンドが登場しています。 日頃から流行に関するアンテナを立てて、ユーザビリティの高いおしゃれなWebサイトを制作しましょう。今回は、2016年の傾向を踏まえつつ、2017年のWebデザイントレンドを予測しました。 2017年のWebデザインを占う二つのポイント 【1】縦に長いWebページ 縦に長く、スクロールしながら読むWebページは2017年も引き続き流行が予想されます。 その理由は、縦長ランディングページのコンバージョン率の高さにあります。 優れたセールストークが、商品に対する興味を引き出し、客がついつい長時間に及んで話を聞いてしまうように、様々な工夫のこらされた縦長Webページには、どんどん続きを見たくなる魅力があります。
つづきを読む
2016.11.20
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義している仕様の中から、以前に「calc()」を紹介したことがあります。今回は、「vw」と「vh」の紹介をしていきたいと思います。 ビューポートユニットとは？ 「vw」と「vh」は、CSS Values and Units モジュールの中のViewport Units という項で紹介されています。ビューポートは、Webサイトを表示しているブラウザの表示領域のことを意味します。つまり、ビューポートユニットというのは、ブラウザの表示領域に対して、どのくらいの幅または高さにしたいか、ということを指定することができるものです。レスポンシブWebデザインが当然となっている現在ですが、％指定をし
つづきを読む
2016.11.19
米Google Inc.が現地時間で2016年11月16日に、「Google Earth」VRヘッドセット対応版「Google Earth VR」を無償公開しました。 Google Earthは、世界中、あらゆる場所の映像や画像を閲覧し、まるで自宅に居ながらにしてその地の風景や文化に触れるという疑似体験ができるサービスです。 今までも、たくさんの情報や世界中の美しい風景が紹介されてきましたが、今回、仮想現実（ヴァーチャルリアリティ）に対応させた「Google Earth VR」がいよいよリリースされたのです。 たとえば、東京はもちろん、アマゾン川、グランドキャニオン、スイスのアルプスとといった世界中の有名な地を訪れ、上空から風景を見渡したり、手軽に体験できるツアーが用意されているとか。 聞
つづきを読む
2016.11.18
少し前まで、ローディングアニメーションといえばGIFアニメーションでしたが、最近ではCSSのみで実装するということが増えてきました。 CSSのアニメーションは、JavaScriptを知らなくても簡単にアニメーションを作ることができる手軽さがある上、システムにも負荷をかけません。そのため、ローディングアニメーションにはぴったりの技術なのです。 実現するには、CSS3から登場したanimation プロパティをアニメーションさせたい要素に付与します。 今日は、そんなCSSアニメーションで作られたローディング素材のコードを公開しているサイトをご紹介します。ぜひ、皆様のWebサイト制作やCSS3のお勉強に活かしてください。 1. Loaders.css Loaders.css このサイトは、28個
つづきを読む
2016.11.17
JavaScriptを使ったWebプログラミングを行う時に、覚えておきたいのがデバッグ（プログラミングの誤りを修正すること）のやり方です。 デバッグすることで、コードを正しく修正するだけでなく、開発スピードをアップさせることができます。Webブラウザのコンソールを用いて、デバッグを行う際のコツをご紹介しましょう。 変数やオブジェクトの値のチェック方法 JavaScriptのデバッグ作業で、変数の中身やオブジェクトの値をチェックしたい場合、alertメソッドを使うのが一般的です。 alert("出力したい変数名"); しかし、いくらチェックしたいからと言って、コード内に大量にalertを書くと、alertダイアログが沢山出てきます。開発を先に進めるためにはいちいち閉じなければならず、効率的と
つづきを読む
2016.11.16
こんにちは。インターネットアカデミーの鹿野です。 最近、入校される前のお客様からよく、こんなお話をいただくことがあります。 Webディレクターに興味がある！いずれWebディレクターになりたい！！ こういった向上心のあるお客様が多くいらっしゃるのはインターネット・アカデミーとしては嬉しい限りです。 また、最近求人を見ていてもっとも募集が多い職種のひとつが"Webディレクター"です。 そんな、人気も需要も高いWebディレクターですが、本日はまず Webディレクターって具体的にどんな仕事をするのだろう、どんなスキルが求められるのだろう？ といったところをお伝えします。 Webディレクターの仕事 Webディレクターは、Webに関わるプロジェクトを監督・指揮・管理する人を指します。具体的には、クライ
つづきを読む
2016.11.15
Webサイトのデザインはもちろん、アプリ開発でもなんでも、アイコンは重要なポイントですよね。自分でデザインするのもいいですが、さくっとフリー素材でアイコンがほしい！という方は、無料でフラットアイコンが手に入る「Icons8」がオススメです。 このサイトは、36,000個以上も用意されているフラットアイコン(フラットデザインで作られたアイコンのこと)を、リンク表記さえすれば無料でダウンロードして使うことができます。カテゴリ分けも細かくされているので探しやすいのと、何より日本語対応しているのが嬉しいですね！ 「Icons8」の使い方 「Icons8」は、サイトにアクセスしたときに最初に表示される検索窓にキーワードを入力、もしくはカテゴリ選択をすることで必要なアイコンを手に入れることができます。
つづきを読む
2016.11.14
成功すれば低コストで高い集客効果があるソーシャルメディア（SNS）マーケティング。 中でも気軽に始められるTwitterは、多くの企業が公式アカウントを開設しています。 そのため、今では「運用するリスク」よりも「運用しないリスク」の方が大きいとも言われています。 そんなTwitter公式アカウントで成功するためには、どんなことに気をつければいいのでしょうか？ Twitter利用の重要性 2011年の東日本大震災では、多くの人がTwitterを介して活発な情報交換を行い、情報伝達ツールとして脚光を浴びました。 （過去ブログ記事「震災被災者を救うインターネット」も併せてご覧ください。） それ以降、災害情報や電車の運行情報を得るといった日常的な情報収集やコミュニケーションツールとして、多くの人が
つづきを読む
2016.11.12
HTML5で新しく追加されたタグの一つ、「section要素」。 「人間にとってもコンピュータにとっても内容を理解しやすい文書構造を作ろう」というセマンティックWebの考え方に基づいて登場しました。そのsection要素を使ったマークアップの考え方を把握することが、HTML5の正しい理解につながります。 今日は、そんなsection要素を活用する「セクションマークアップ」の考え方についてご紹介します。 セクションとは セクションとは、章や節、項など、文書全体の中の一部のまとまりやカタマリのことを指します。セクションは、見出しと本文というように、階層構造で成り立つ領域になっています。新聞や雑誌をイメージするとわかりやすいでしょう。セクションがなければ、いくら有益な情報が載っていたとしても、読
つづきを読む
2016.11.11
本日は、色選びに悩む方に、ユニークな選び方でカラーコードを取得できる「Colorize」というサイトをご紹介します。 このサイトは、キーワードを入力すると、キーワードイメージに合うカラーコードを表示してくれるサイトです。とってもシンプルですよね。その仕組みはというと、ユーザーが入力したキーワードで画像検索をかけ、画像検索結果から平均した色のカラーコードを表示してくれているのです。 「Colorize」の使い方 Colorizeの使い方はこれ以上ないほどシンプル。 ただキーワードを入力して検索するだけです。すると、カラーコードが表示されます。トップページには、「sky」「purple」「sand」の3つのキーワードの検索結果例が表示されています。 メイン画像は、「Ocean」で検索した結果で
つづきを読む