こんにちは！　アドチームのきょうへいです。 以前「【2014年版】リスティング担当者から見た、イケてるランディングページ10選」という記事を書かせていただきましたので今年も2015年版を書こうと思います！ 今回は色々なLPを見ていたときに気になったものをまとめたものなので、共通点があまりないかもしれませんが、どれもキレイなデザインだったり、面白い動きをするページで、スクロールをさせられてしまうものばかりです。 1. Beagle https://getbeagle.co/ ※現在、上記リンク先は表示できません。 スクロールエフェクトがユニークなLPです。 ファーストビューで大きな写真を使用していて、スクロールをするとそれぞれのアニメーションがさまざまな動きをします。気が付いたら上から下まで何度もスクロールしまくってました。素敵です。 2. Melanie F http://www.mela

こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります

こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col

こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており（総務省「情報通信白書令和３年度版」）、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェ

こんにちは。LIGのアートディレクターの長岡です。 前回と前々回に続き、Google Analyticsを使った簡単な分析方法をご紹介します。 入門編 以前の記事を読んでいない方は、この機会にぜひ読んで参考にしてみてください。 誰でも簡単にできるGoogle Analyticsのランディングページ分析入門 誰でも簡単にできるGoogleAnalyticsの検索キーワード分析入門 今回のテーマは「ペルソナ」 皆さんは、立てたペルソナどうしてますか？ 立てた後にキチンと検証していますか？ 検証を元に見直していますか？ というお話。興味のある方は、ぜひ参考にしてください。 ペルソナを立ててそのままにしていませんか？ 立てたペルソナをそのままにしていませんか？ Webサイト制作時に苦労して立てたペルソナ。サイトリリース後にキチンと確認して検証して、見直していますか？ 検証方法は他にもあると思います

今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは

こんにちは。 アートディレクターの野田です。 年越しを会社にて行い、年始から悪い父親の見本となりました。 皆様も働きすぎには注意してください。崩れます。色々。 今回も気になったWebサイトを紹介させていただきます。 クリスマス時期ということもあり、比較的赤と緑、白をベースにしたサイトを多く見かけました。 クオリティも高く、どれも見ていて楽しいものです。それではどうぞご覧ください。 Santa Stories http://www.santastories.be/ おそらく、サンタ率を確認できるサイトです。ユーザ選択型のサイトが増えていますが、クリスマスに合わせた面白い企画です。 #santa　#story　#christmas Moeko Abe http://abemoeko.com/ フォトグラファーさんのWebサイトです。ページ遷移時の演出や光の取り入れ方をうまく使った演出がさすがだ

こんにちは、ディレクターのはるかです。今年も気がつけば、もうすぐ冬を迎えます。寒いです。 そして私が新人ディレクターとしてLIGに入社してから、あっという間に1年が過ぎていました。時間が過ぎるのは早いものです……。 といわけで今回は、私自身の体験をもとに“ディレクターに転職して初めて気づいたディレクションで大事な3つのこと”についてお話していきたいと思います。 内容としては本当に当たり前のことばかりですが、私がディレクターとして新人だったからこそ感じたこと、1年経った現在での変化などを書いていくことで、ディレクターを目指している方やディレクターになりたての方の参考になればと思います。 1. コミュニケーションについて 新人のときに感じたこと ディレクターになるまで自分自身気付かなかったのですが、外部の方とのビジネスコミュニケーションがあまり得意ではないことがわかりました。 前職ではWeb系

こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima

こんにちは！ 中学生の頃、「にんにくの湯」という入浴剤があったので面白半分で入れてみたら風呂中にニンニク臭が立ち込め、逃げ場がなくなり吐きました。 メディア事業部のきょうへいです！ いつもGoogle Analytics（以下、Analytics）の機能説明や設定方法について書いていますが、今回はベンチマーク機能について解説したいと思います。 ▼目次 ベンチマーク機能とは？ ベンチマーク機能の3つのメニュー ベンチマーク機能の使い方 ベンチマーク機能の設定方法 ベンチマーク機能の分析方法 同規模のサイト数を確認する 同規模のサイトと比較する 表の一部を変更する ベンチマーク機能とは？ ベンチマーク機能とは、Analyticsを利用している同規模のサイトのセッションや新規ユーザー数などの平均値を算出し、自社サイトと比較することができる機能です。 2008年から提供されていたものの、2011年

こんにちは、たまです。 LIGにディレクターとして入社して早1年、さまざまな案件に関わらせていただきましたが、困難な事態に直面することも何度かありました。 今あらためて振り返ってみると、そういうトラブルが起きてしまう案件というのは、最初の進め方であったり、決めごとや確認ごとが甘かったりと、共通した原因があるように思えます。 そこで本日は、僕なりに「こうしておくとトラブルを防げる」と思っていることをまとめてみました。 もちろん制作のディレクションは人それぞれだと思いますので、参考までにご覧いただければと思います。 ディレクターがWeb制作でトラブルを防ぐための5つのコツ プロジェクトでトラブルが発生する主な要因としては、以下の3つが考えられます。 制作範囲 スケジュール 金額 もちろんデザインや実装でトラブルになることも多々ありますが、そもそもこの3つがクライアントと認識があっていない場合、

こんにちは、LIGのアートディレクターの長岡です。 今回は仮説、そして検証という“改善サイクルの重要性”についてお話をしたいと思います。 💡サイト改善の5ステップについてはこちらの記事から 1. Webサイトのゴール（目的・KGI）を把握する 課題を見つける前に、まずはWebサイトの目的を把握することが大切です。ゴール達成に向けて、必要なものから優先的におこなうようにしましょう。 2. 課題を探す サイトを改善するための「課題」を見つけましょう。課題の見つけ方に関する代表的な手法には、以下のようなものが挙げられます。 ▼サイト改善につながるヒントの見つけ方例 Webサイト担当者からのヒアリングをもとに課題を見つける Webサイトへのお問い合わせから課題を見つける アクセスログ解析や分析ツールをもとに課題を見つける ユーザーテストを実施して課題を見つける 他にもいろいろありますが、箇条書き

はじめまして。デザイナーののっちです。 好きな業務の1つがバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて……」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。これは新米デザイナーなら、誰でも一度は通る道だと思います。 そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。 独学でつまずいていませんか？ バナーデザインの作り方を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年2月に編集部が情報を更新し

こんにちはデザイナーの藤田です。 テレビなどを見ていて、一時期あまり見かけなかったのに「おや、最近また○○をよく見かけるな。あらためて見るとやっぱりいいな。」なんて思った経験、皆さんもありませんか。 というわけで今回は「おや、最近スプラッシュページを設けたWebサイトよく見かけるな」と感じたので、スプラッシュページ・スクリーンを設けたWebサイトをまとめてみました。 1. TWLVR http://twlvr.com/ フランスの動画・Web制作会社のサイトです。 ローディング完了後、女性の後ろ姿をリピート再生しております。 振り向きそうで振り向かないのが残念ですが、スプラッシュページからスクロールをおこなった後の演出が素敵です。 2. Failsworth 1903 http://www.failsworth1903.com/ イギリスの帽子メーカのサイトです。 国内サイトではあまり見か

SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ