Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと

Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、

せっかくWordPressで文章を書いているなら、うまく仕事につなげたいもの。ソーシャル拡散からマネタイズまで、お役立ち系プラグインの紹介です。ライターじゃなくても、WordPressサイトを運用しているならチェックしてみて。 ライター（本の著者かコピーライターかを問わず）の生活は誤解されがちです。周りの友人からは夢のような仕事を始めたと思われます。自宅を出てオフィスに出勤する必要はなく、やることなすことに文句をつけてくるうるさい上司もいません。さらに会社という制約もなく、毎日4時間の昼食休憩を取れると思われているのです。 確かにそういうことはあるものの、ライターの生活はノートPCのブルーライトを何時間も浴びることだという事実についてはみな忘れがちです。また、しっくりくる言葉やフレーズ、的確なトーンを必死に探さなければなりません。ライターにとって、生計を立てていくことは実態のない制御不可能

「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素

たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr

この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

一口に「電子書籍」といっても、実はそのフォーマット（データ形式）によってさまざまな種類が存在する。そのため、気に入った電子書籍を読む前に、その本がどのフォーマットのものなのか把握して、サポートしている閲覧用ソフト（あるいはハードウェア）を手に入れなければならない。いわば、VHS対ベータ、Blu-ray対HD DVDのような規格争いが電子書籍においても繰り返されており、主流となりそうなフォーマットはどれか、ある程度気に留めておく必要があるのだ。 ユーザーとしては悩ましいところだが、閲覧用端末を数多く売りたいメーカーの思惑、不正コピーは避けたいがより多く流通させたい出版社の本音、場所や時間を気にせず紙同様に楽しみたい消費者の心情、その狭間で落とし所を見つけようという努力の結果が、フォーマットとしての電子書籍だといえる。 電子書籍フォーマットは、いくつかの基準により分類できる。その分類を把握した

一般的なWeb制作のプロジェクトについて、大まかな流れとポイントを4つのフェーズで説明します。Webディレクターは、各フェーズのポイントを把握し、的確なディレクションをしていく必要があります。 打ち合わせから提案まで Web制作は、クライアントからの問い合わせや、営業が制作案件を取ってくるところから始まります。この時点で見積りの提出が必要な場合もありますが、大抵は最初にヒアリングのために初回打ち合わせ（オリエンテーション）をセッティングします。なお、案件を受ける際には、コンペか否かも必ず確認しましょう。 初回の打ち合わせで、クライアントの要望やサイト制作の目的などを把握したら、次に企画提案書を作成します。要望や案件規模にもよりますが、初期段階の提案ではプロジェクトの全体像やコンセプトに沿った企画案を盛り込みます。クライアントから要望があれば、この段階でデザインのラフ案を制作することもありま

Webディレクターが制作プロジェクトを進めるうえで重要なのが、スタッフとのコミュニケーションです。 クライアントとの打ち合わせに制作スタッフが同行した場合はクライアントの意向が直接伝わりますが、業務の都合などで同行できないこともあります。その場合は、ディレクターがクライアントの意向を制作スタッフへ伝える必要があります。ただし、クライアントが言ったことをそのまま伝えるだけではディレクターが存在する意味がありません。 クライアントとスタッフの間に入り、お互いの意思の疎通を手助けすることがディレクターの役目です。スタッフとのコミュニケーションにおいては、デザイナーやプログラマーといった相手の立場や職種、さらにはスキルや個性に合わせた伝え方を考えなければなりません。 スタッフに合わせた伝え方を考える たとえば、「使いやすい問い合わせフォームを制作したい」というクライアントの依頼を例に考えてみましょ

Webディレクターが勤務する企業の業態には、大きく「広告代理店」「Web制作会社」「システム開発会社」「サービスプロバイダー」の4つがあります。それぞれの業態によって、Webディレクターの役割も異なります。 広告代理店の場合 広告代理店は、メディアの広告枠を企業に売るのが主な業務ですが、最近では商品やサービスの販促活動の企画・制作も業務範囲となってきています。 広告代理店のディレクターはクライアントの要望をヒアリングし、マーケティングや販促活動をする上でメディア（本書ではWeb）をどのように使い、プロモーションをしていくかを企画提案します。また、社内に制作部署がない場合は、ディレクターが外部の制作会社に対するディレクション業務を担当します。 Web制作会社の場合 代理店や企業から依頼された内容をもとに、デザインを作成し、HTMLコーディングをしてWebサイトを構築することが主な業務です。近

Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン

いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。