需要が高まっているアニメーションを取り入れたWebサイトのデザインプロセスを大公開！【実例あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。春っていいですよね……ほんとに。 さて、わたしは先日、「JOYSOUND」のスペシャルサイトのデザインを担当させていただきました。カラオケに関するさまざまなデータをインフォグラフィックにして視覚化し、アニメーションさせて楽しげに伝えるような、そんなサイトです。 今回は、そのインフォグラフィックやアニメーションにフォーカスし、デザイナー目線での制作プロセスをご紹介していきます。 視覚化や動きのあるサイトのデザインの仕方などを、LIGのサイト制作例として参考にしていただけると嬉しいです！ はじめに お客様はこんな会社さま 今回、制作をご依頼いただいたお客様は、株式会社エクシングさま。通信カラオケ「JOYSOUND」の運営などを行い、カラオケのさらなる楽しさを追求・提案している企業さまです。 エクシングさまとのおつきあいは、弊社サイトを通じて制作のお問い合わせ
Google アナリティクスでもう悩まない！ ウェブ解析士が教える分析のコツ【アナリティクス完全ガイド無料配布】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ メディア事業部マネージャーのたくです。 突然ですが、Google アナリティクスを使ったサイト解析に苦労していませんか？ アクセスログを解析することはもちろん、報告用のレポート作成に時間がかかることってよくありますよね。見ることができる指標がありすぎて迷ってしまったり、山のようなデータから問題点を探すことにも一苦労。どうすれば短時間でサイトの課題を見つけ、改善策を実行することができるのでしょうか。 そこで今回お話を伺ったのは、株式会社クリエイターズネクストで代表取締役を務める窪田望さん。アクセス解析の専門家である窪田さんに、アナリティクスを使った分析の進め方やポイントについて教えていただきました。 ▼目次 アナリティクス利用者の約60%は改善策を打てていない アナリティクスの鉄則は「インパクト・ファースト」 数値の「違和感」を見つけ出す感覚が改善スピードを上げる ペルソナ設定
Git管理ツール「SourceTree」で差分ファイルを抜き出す方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、お久しぶりです、はやちです✌(´ʘ‿ʘ｀)✌ ここ最近DMMのブラウザゲーム「刀剣乱舞」にハマってしまいましてひたすら刀狩りをしております( ˇωˇ )＜おじいちゃんこない そんなことはどうでもいいですね。 今回は、Git管理ツール「SourceTree」を使用して昔のファイルと作業したファイルの差分を抜き出す方法をご紹介いたします( ˘ω˘)☝ バッチファイルを用意する まずはバッチファイルを用意しましょう( ˇωˇ)☝ 適当なディレクトリにファイルを保存します。 Windows用 Windows用がこちらです。 export_diff_zip.bat if "%2" EQU "" ( set PARAM1=HEAD set PARAM2=%1 ) else ( set PARAM1=%1 set PARAM2=%2 ) setlocal enabledelayedexpan
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
競合サイトを丸裸に！SEO対策や検索順位などがわかるWeb分析ツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Pooleリーダーの鮫島です。 競合、丸裸にしてますか？（ライバル視しているサイトの、アクセス数やどこからトラフィックがあるのか、どういったキーワードを選定しどのくらいの検索数があるのかなど、SEO周りの対策を分析していますか？） 私は、主に提案資料を作成するときや、サイト設計をするときなどにします。 そういうときは、競合分析ツールを使うと効率的に情報を取得することができます。 というわけで、今回は私が普段使用している競合分析ツールを厳選して7ツールご紹介します。 無料で使える！ 競合サイトを分析できる7つのツール 1. Dockpit（ドックピット） https://www.valuesccg.com/dockpit/ 最近、認知度が高まりつつある競合分析ツールです。 機能の一部が無料で使えるのがかなり助かりますね。 無料登録で取得できる指標はざっと下記の通り。 自社サイトと競合サイトの
この新卒採用サイトがすごい！2016年度イケてる企業まとめ20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、さんぺーです。 私は2015年度卒業予定のLIGの内定者だったのですが、うかつにも留年をして2016年度卒業となりました。本当にありがとうございます。 今年はアルバイトとしてLIGで働くことになりましたが、必ずしもLIGにもう一度採用されるとは限らない身の上です。最近は漠然とした不安を抱えて「2016年度卒業の学生のための採用ページ」を眺めているのですが、2016年度は特にユニークなものが多いことに気がつきました。 というわけで、今回はもう一度就活生になった私がグッと来たサイトをまとめてみます。普段からネットを舐めるように見ているIT/Webパーソンの方もお楽しみいただけると思います。 それでは、行ってみましょう＼(＾ω＾＼Ξ／＾ω＾)／ リクルートホールディングス RECRUIT革命｜リクルートホールディングス 2016年度新卒Web採用サイト http://recruit-
Git初心者でも大丈夫！完全無料でGithub PagesにWebページを公開する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。先日LIGのBBQが行われたのですが、夏の日差しで黒こげになりました。 さて、今回は昨今のエンジニアの必須ツールと言っても過言ではないGithubの話です。 Githubと言えば、ソースコードのバージョン管理システムであるGitのホスティング環境として有名です。 Git経由でソースコードを共有して、個人やチームでソースコードの管理を行えます。 ※LIG社内ではGithubではなくてBitbucketを利用していますが・・・ そんなGithubにGithub Pagesという静的なWebページを無料で公開できる機能があるのはご存知でしょうか。 ということで、Github Pagesを使ってGithub上に静的なページを公開する方法を紹介します。ノンプログラマ向けなので、Git初心者の方もぜひチャレンジしてみてください！ 参考：Github Pages h
これは便利！Animate.cssをSassで使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。 このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。 さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。 Animate.cssとは？ Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。 使用方法 まずはこちらからダウンロードしてください。 ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。 animate.css → _animate.scss ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延さ
Google Analyticsのnot provided対策方法まとめ | 株式会社LIG
こんにちわ！ 小学生低学年の頃、給食係で肉団子入りスープを配っていると当時担任だったとても優しい先生に「肉がすくねぇじゃねぇか！」とマジギレされ泣いたことがあります。 その時大人の怖さを知りました。メディア事業部のきょうへいです。 本日はGoogle Analytics（以下、Analytics）についての記事を書かせていただこうと思います。 Analyticsは無料で使える解析ツールであるにも関わらず、高機能なアクセス解析機能があるのでとても重宝しています。 ただ、気になるのはユーザーがどのようなキーワードで検索したかを調べる時に表示される(not provided)というキーワードです。 この(not provided)というキーワードが、ある時期からオーガニック検索キーワードの大半を占めるようになりました。 それ以来、ユーザーがどのようなキーワードで検索してサイトに訪問したかを知
レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです、ライターのYUKIです！ モービル・ファーストやレスポンシブ・デザイン、リーンUXやアジャイルなど、デザイナーとして押さえておきたいトピックはたくさんあります。私自身がまだまだ勉強不足なこともあり、今回はここに挙げたもののうちおそらく皆さんもよくご存知のレスポンシブ・デザインと同意味で使われることがある、アダプティブ・デザインについての個人的な見解をシェアさせて頂こうと思います。 「レスポンシブ・デザインて何？」という方は、まずLIGの過去記事をどうぞ。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 はじめに レスポンシブ・デザインとアダプティブ・デザインが混同される理由 スマートフォンやタブレット、スマートテレビなどの普及により、
ビジネスで活躍！フリーランスにオススメの無料クラウドサービスまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！千葉でフリーランスWebデザイナーとして活動しておりますライターの、のび太です。最近仕事でクラウドサービスを利用することがかなり増えてきました。 クラウドサービスとは？ 英語のCloudを直訳すると「雲」という意味ですね。 クラウドサービスとは「雲の上のような場所＝ネット上」にデータを置き、PC、スマホ、タブレットなどあらゆるデバイスで自由にアクセスできるサービスです。 基本的にPCで作ったデータは、そのPCからしかアクセス・編集できません。従来は、そのデータを他の場所で使いたいとき、USBメモリーにいれておいたり、スマホにコピーしたデータを入れておいたりしていたわけですが、クラウドサービスを利用すれば、その必要が一切なくなるわけです。これは助かりますよね！ ＜クラウドサービスの主な利点＞ ネット環境があれば、いつでもどこでもデータの閲覧・編集ができる 複数人で同じデ
スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。 仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。 実務でもよく使われるものには記述例を載せていますので、参考にしてください。 CSS3で追加されたセレクタと擬似クラスまとめ 属性セレクタ 構造疑似クラス ターゲット疑似クラス UI要素状態疑似クラス 否定擬似クラス 属性セレクタ 属性で設定した値に関するセレクタです。 E[Attr^=”val”] セレクタ［属性＾＝”値”］ Attr属性の値がvalで始まるセレクタに適用する。 【例】リンクの属性がhttpを含む（外部リンク）場
Sassを使って時間短縮！アイコンフォントを手軽に使える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
隠れた便利機能ベスト3
こんにちは。デザイナーのハルエです。 今回は、知っているのと知らないのとでは作業時間に圧倒的な差がついてしまうPhotoshopの効率化機能マイベスト3を紹介させていただきます！ 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※2014年3月7日に公開された記事を再編集したものです。 その1：Vanishing Pointでハメコミ合成 みなさん、“Vanishing Point（ヴァニシングポイント）”機能をご存じでしょうか？ 機能の存在は知っていても、使ったことのない方が多いかと思います。 このVanishing Point
WordPressでレスポンシブを構築する際の画像サイズ対応例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイン バイノー！ おっしーです。 今回はWordressにどうやってレスポンシブデザインを組み込むか？に焦点を絞ってみました。 まず「レスポンシブデザイン」について。 弊社のデザイナーの記事を読んでいただくと、すごくわかりやすいと思います。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2！！ 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 で、今回は画像のサイズに対応するにはどうするか？と言う事ですね。 WordPressでは便利な関数『the_post_thumbnail』がございます。 ドキュメントを確認して頂けると… 「トリミング」処理なので画像が切り抜かれてます。 /* functionで定義する */ add_image_size( 'category-thumb', 300, 300
プラグインまとめ20選 | 株式会社LIG
1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb
Photoshopで線画抽出する方法 〜手書きイラストをスキャンした場合〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近Photoshopをゲットしたライターのしゅーへいです。 LIGデザイナー陣のデザイン技術をチラチラ見ながら、Photoshopの勉強をしております。ちなみに打倒、王さんです。 今回の記事は、手描きのイラストをデジタルデータ化する方法です。 必要な物は「スキャナ」と「Photoshop」です。今から紹介する方法は、線画でも利用可能なので覚えておいて損はないです。 ストーリー 家にあった中二病ノートに2012年4月に書いたイラストというか文字がありました。なんか「イイナ・・・。」とか思ったので、このイラストをデジタル化しようと思います。 スキャンする まずはスキャナを使ってスキャンします。 320dpiのTIF形式でスキャンしました。綺麗にスキャンできるならJPEGでも良いと思います。 Photoshopでの作業 次に、Photoshopでの作業に移ります。 余計な部分の除去 そのままス
ウェブサービスの管理画面を作る上で守るべき6つのルール | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！！ メディア事業部のまさしです。 昨今、ウェブサイトをはじめとするウェブサービスやアプリなどは、作っておしまいではなく、作ってから運用し改修を続けて成長させていくことを前提とするようになりました。 その際に重要な役割となる管理画面ですが、管理画面って作るときに何のデータを出していいのか、どうデザインしたらいいのか迷いますよね。結果、あらゆる機能とあらゆるデータを盛り込んだ管理画面になってしまいがちです。 今回は、そんな悩みを解消できるように、目的に合っている使い勝手の良い管理画面をつくるための6つのルールをご紹介いたします。 ウェブサービスの管理画面をつくる上で守るべき6つのルール ルール1：ターゲットは1つに絞るべし！ 最も効果的な管理画面とは、単一のユーザーをターゲットとして、その目的をもとに固有のデータを表示しているものです。 複数のユーザーをターゲットとしてしまうと、い
2013年厳選版！フロントエンドエンジニアがオススメするWEB系の技術書・指南書 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 今まではデザイナーという肩書きだったのですが、最近会社の偉い人たちが 「フロントエンドエンジニアがほしいなあー。（チラッ）」 「そうだねー。ほしいねー。誰かやってくれないかなー（チラッ）」 という会話を僕の聞こえるところでよくするので、空気を読んでジョブ・チェンジした次第であります。 さて、今年も残すところあとわずかということで、今年僕が読んでタメになったWEB系の技術書やら指南書やらをご紹介いたします。WEB系の仕事をされている方、今後する予定のある方はぜひ参考にしてみてください。 もくじ 1.Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ 2.スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック 3.レスポンシブWebデザインテクニックブック プロが教えるマルチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
