こんにちは。LIGの岩上です。 インフォグラフィックは情報やデータを視覚的に表現したいときに用いられ、ごちゃごちゃしているものをシンプルでわかりやすく伝えるために用いられます。 今回は、インフォグラフィックとはどんなものなのか、具体例や作成のコツまで解説していきます。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は、2013年9月27日に公開された記事を再編集したものです。 インフォグラフィックとは インフォグラフィック（Infographic）とは、わかりづらいデータや情報を、図やイラスト

人物紹介：菊池 LIGのインターン生。即戦力と期待されているが実力は未知数。 2014年、LIGへの内定が決まっているが、油断は禁物である。 実は今回、SeeSawという画期的なアプリのステマを依頼されたのは良いのですが、あまりにも画期的すぎて困ってます。 このアプリの動作画面を見て下さい。 なんという事でしょう。何も情報が得られません。 「何かがパッと消えたようなエフェクト」の部分、それは友達と送受信した写真が消滅した事を意味します。 そう、今回ご紹介するアプリ「SeeSaw」のセールスポイントとは 「送った写真が数秒で消える。受け取った写真も数秒で消える。」 というものなのです。 SeeSawの主な機能 友達同士で写真が送れる。 撮った写真に落書きができる。 送った写真は最大8秒で消える。　←注目 …せっかく送った写真がすぐに消えるとは、驚くべきコンセプトです。 1度写真を見るボタンを

そして一日が終わった…　今日もアニメ見逃した… こんにちは、メディア事業部の王です( ́・_・ )、アニメの視聴時間を増やすために、常日頃から仕事の効率化を心がけております。今回は作業効率化の強い武器になる「Google Apps Script」を紹介したいと思います。 まずは初耳の方にQ&A形式でご説明します。 Q&A Q:「Google Apps Script」って？ A:　Googleが提供している様々なサービス、例えば「Gmail」、「スプレッドシート」、「マップ」、「ドライブ」、「カレンダー」、「Analytics」、「Adsense」等のAPIをJavascriptで利用するクラウド型スクリプト（要は実行はクライアント側ではなく、サーバーにて行う）です。 Q:Google Apps Scriptで何ができるの？ A:　Googleアプリを自分の好みや必要に応じて機能を自由に拡張

こんばんは。小林です。 今回の記事は、下記を利用して開発されている方には、是非読んでいただきたい。 Sublime Text + Google Chrome( 或いはSafari ) そうでない方にもそこそこ読んでいただきたい。 目的としましては、「CSSの開発をより高速に行える環境を作りましょう！」ということなんです。百聞は一見に如かずということで、まずは、こちらのスーパーにエクサイティングなデモ動画を見ちゃいましょう！ 諸般の事情で動画が観れないという方に簡単に説明しますと、Emmet LiveStyle(以下LiveStyleと表記)を使うことで以下のことができます。 リアルタイム更新。Sublime Textでただタイピングするだけで、あたかもブラウザのデベロッパーツールのCSSパネルを弄るかのように、リアルタイムでCSSを更新できる。無論いちいちファイルを保存したりする必要はない

お久しぶりです。マラガの海の贈り物ディレクターのSEKOです。 みなさんは普段スマホで「いつ」「どこで」調べ物をしますか？ 私は会社の行き帰りの電車の中で調べ物をしている事が多いですが、「限られた時間の中で知りたい情報をすぐに見つけたい」なのにサイトが重かったり、知りたい情報が見つけにくい、操作がしにくい。そんな経験はないでしょうか？ 本日はストレスのないスマホサイトを作るにあたりUIをどのように考慮していけば良いか８つのポイントをお届けします。 スマートフォンを利用するシーンを想像しよう。 まず一番重要なことがスマホサイトを利用するシーンを考える事です。大抵スマホサイトを利用する場合は下記の状態が考えられます。 時間に余裕がない 通信環境が不安定な状況にいる 利用が断続的である。 屋外、通勤時間の電車の中、休憩時間のカフェ、会話中に思い出せない事がある時など「すき間の時間」の利用シーンが

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様

こんにちは。アートディレクターの長岡です。 最近は、毎朝娘を保育園へ送ってから出社しています。 子育てにも優しい会社、それがLIGです！！ イクメンぶりをアピールしたところで、本題に入りたいと思います。 Webデザイナーならば、賞を取ってみたいと考えたことが一度はありますよね。今回は、そんなWebデザインのインスピレーションを刺激してくれる優れたWebデザインアワードサイトを厳選して5つご紹介します。 世界のアワード Awwwards https://www.awwwards.com/ 言わずもがなでずが、世界でもっとも有名なWebデザインアワードです。 デザインや動きのインスピレーションを刺激したい方はこちらがオススメです！ サイトに登録すれば、下記の項目に簡単に投票できます。 デザイン クリエイティビティ ユーザビリティ コンテンツ FWA http://www.favouritewe

ライター内藤です。 本日は日本人の大好きな「均等割り付け」を超軽量jQueryで実現します。 特にtableのthタグなどで利用頻度が高いかと思いますが、block要素でも使えます。 Wordで言うと、これ　　です。 両端揃えではなく均等割り付けが必要な理由 下の図が分かりやすいと思います。 text-align: justify; text-justify: inter-ideograph; 上記のcssは、1行に満たない文字に関しては左寄せになります。 この命令の趣旨は、書籍の紙面を想像してもらうとわかりますが、複数に渡る行の右端を揃えることにあります。 ですので、thタグに上記のcssを適用しても、図中2行目以降のようになってしまいます。 つまり、横幅よりも少ない文字列を均等割り付けできないわけです。 cssでは実現できないので、jQueryを使う 拙筆webkit系ブラウザ（Chr

はじめましての方、はじめまして！新たにLIGに加入させていただきました、さわすけです！LIGでは、アホみたいな動きで世間を驚かしてやろうと考えていますが、なかなか行動に移せない、そんな器の男です。どうぞおひとつよろしくお願いします。 さて、男性の皆さん、 「え、やばい！ 狙っていた女性と急にデートが出来る事になった！」 なんて、経験はございませんか？そんな時、急すぎて、いったい何処に連れて行き？何を着ていけば？と、悩んだことはございませんか？そんな世の男性陣にぜひともご紹介したいWEBサイトを勝手に集めましたので、見てもらえたら嬉しいです。 これを見ておけば大抵のデートスポットやその日何を着て行けばよいかを事前に決めておけます。急なデートでも、慌てずエスコートができて、最高のデートができれば、確実にあなたは高い好感をもらえて「モテる」はずです。 はずです。 それでは、「モテる」はずの世界を

こんにちは、紳さんです。 突然ですが、皆さんはマジック：ザ・ギャザリングというカードゲームを知っていますか？　もし、知らないのなら今日は名前だけでも覚えて欲しいと思います。 ちなみに僕はマジック：ザ・ギャザリングの熱狂的なファンなのです。 マジック：ザ・ギャザリングとは？ 一般的な略称は「マジック」、「MTG」。 1993年に世界初のトレーディングカードゲーム（TCG）として誕生し、2013年現在、世界中で最も多くの人間にプレイされているカードゲームである。 その独特な世界観と作りこまれたゲーム性に魅了されたファンは数知れず、マジックに影響を受けたカードゲームは非常に多いと予想される。 LIGにマジックの宣伝依頼が来た事は、僕にとって最大限にテンションが上がる出来事です。しかし、マジックの魅力を写真と文章だけで伝える事は難しく、頭を悩ませました。 マジックの世界は奥が深すぎるのです。 それ

こんにちは、たまです。 突然ですが、皆さんは「プロジェクトは完遂したけど、想定していた見積もりよりも人件費が赤だった・・・スケジュールが伸びてしまった・・・。」という経験はありませんか？ これには、もちろん様々な理由が考えられますが、そもそもタスクの工数分析に問題があるかもしれません！ 今回は、想定工数の誤差を軽減するのに参考となる「PERT」をご紹介します。 PERTとは？ プロジェクトには思いがけない悪い事態が発生し、納品が想定より遅れる場合があります。 悪い事態を明確に予想できる場合はそれを見越して工数を算出できますが、予想できない場合は多少のリスクを足しただけの「一点見積もり」がほとんどではないでしょうか？ しかも、「多少のリスク」とすると最小の工数に寄った計算になります。そういった一点見積もりでは工数の誤差が発生する可能性が高くなります。 そこで誤差を軽減するためにPERTを利用

お久しぶりです。野田です。 娘が生まれてきてから、ぱったりとレコード遊びやスケボーをやらなくなってしまいました。 こうやってお父さんになっていくのですね。 怖い怖い。 今回は、フォントの基礎となろうことをまとめてみました。フォント選び初心者の方や、初心に戻りたい方などに見ていただけると幸いです。 さて、デザイナーであれば、フォントの基礎を知っておくのは大事なことですね。フォントの基礎を知らないということは、デザインの幅が狭くなってしまうということも、一つの要因と言えることだと思うので、覚えて損はないと思います。 書体のあれこれ 日本でデザイナーをしている方は、「和文フォント」と「欧文フォント」を使用している方が多いと思います。さらに、そのなかでも大きく4つ書体に分かれています。 書体毎にそれぞれのフォントに特徴があり、下記のような傾向があります。 デザインによると思いますが、求められている

こんにちは。LIGの岩上です。新サービスやキャンペーンサイトをリリースした際、同時にニュースサイトに掲載されれば、企業の広報戦略のうえで有利になるでしょう。 各種ニュースサイトに転載も可能なプレスリリース配信サービスもある一方、無料で情報を受け付けているニュースサイトも多々あります。資金的に余裕がないアーリーステージのベンチャー企業は、効果的にプレスリリースを使っていくことを検討してもいいかもしれません。今回は無料で配信できるプレスリリースサービスや、プレスリリースを受け付けているニュースサイトのおすすめをまとめてみました。 無料で複数媒体に掲載可能なサービス 3選 valuepress（バリュープレス） プレスリリース配信サービス | valuepress 全国紙からニッチメディアまで、あらゆるジャンルの媒体を網羅し、11,000件以上のリストから最大1,000名の記者へプレスリリースを

こんにちは、マウスはトラックボール派のもりたです。 ロジクールのレシーバーとBluetoothの相性が悪いらしく、競合してキーボードが認識されませんって画面に出るんですけど、普通に使えてます。 まいっか。 今回は以前書いた生粋のWinユーザーがMacにすんなり馴染める！便利な無料アプリや、設定まとめの補足で、元WinユーザーのためのMacトピックです。 索引 Windowsでいう「マイコンピューター」を設定する マジックマウスの接続が切れた時の対処法 CDの取り出し方 Dockに入ってないアプリケーションを整理する ファイルの中身を簡単に確認できるクイックルックを活用する 文字が小さくて見づらい…画面のズーム機能を使う ウェブデザイナーの為のおまけ Windowsでいう「マイコンピューター」を設定する WindowsからMacに移行した人が高確率で躓くポイントです。 逆にMacしか使ったこ

LIGの背景画像になって以来、いつ街で声をかけられるのかソワソワしていましたが、いつもと変わらない日常を送っているディレクターの鮫島です。 お客さんとの打ち合わせで「セクハラですね」と言われたのはいい思い出です。 そんなセクハラ画像はこちら さて、今回はサイト制作をする上で、油断しているとつい忘れてしまいがちな制作物（404ページなど）をまとめました。 今では見落とすことはありませんが、ディレクターを始めた時は、メインの制作物に気がいってしまい、つい・・細かいページを忘れてしまって、リリースの直前に気づいて慌てて制作する。。というとても恥ずかしい失態をしていたのを思い出します。 制作物といっても幅広いので、ページやパーツ毎にまとめてみました。 必ずしも制作するものばかりではないので、制作物毎にチェックするといいと思います。 ページ編 404ページ 存在しないURLが打ち込まれた場合に表示さ

こんにちは、デザイナーの王です。絵を描くのが趣味です。 最近は絵を書く時間が全く持てなくて困っています……。 どうにか早く描けないものかと悩んだ末、表題の通り、「写真から絵を作ってしまおう」という結論に至ったわけです。 折角だし、絵が描けなくて困っている方たちにも役に立つテクニックなのではないかということで、やり方をさくっと説明してみたいと思います。 【こちらもおすすめ】 ☞ Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 素材写真を用意する 鉛筆画らしく見せるためには、まず写真を切り抜いておきましょう。 アウトラインを抽出 次に、以下のステップを踏んで、アウトラインの抽出を行います。 cmd + Jでレイヤーを複製します。 cmd + Iで反転させます。 Shift + Alt + D　で　描画モードを「覆い焼き」にします。 「色相 ・ 彩度」の調整レイヤーを

ども、ゆうせいです。 LIGではメディア運営や編集などの仕事をしています。このメディア運営では画像を扱うことも多く、このままでは俺のMacBook Airのストレージが埋まってしまうという危機感がありました。埋まるのは社長の岩上だけで充分だろってことで、サクッと「Bitcasa」を導入することにしました。 Bitcasaとは？ Bitcasaはクラウド上の外部ハードドライブで、容量が不足することは絶対にありません。 お使いのデバイス（ホームコンピューター、仕事用ラップトップ、携帯電話、タブレット）とシームレスに連携し、どこからでも保管データにアクセスできます。たとえ巨大なファイルでもお友達やご家族に瞬時に送ることができ、方法も簡単です。 引用元：Bitcasa Infinite Driveの概要 | クラウドの外部ハードドライブ ようするにクラウドストレージです。DropboxとかSuga

こんにちは、LIGのカメラ担当のゴウです。 昔からカメラが趣味でずっと人を中心に撮ってきたのですが、撮影をする際の「笑顔の引き出し方」に関してのノウハウを今回お伝えしたいと思います。 が、その前にひとつ、フォトコンテストの紹介をさせてください。 ベストスマイル・オブ・ザ・イヤー！ 日本歯科医師会が主催する、ベストスマイル・オブ・ザ・イヤーというフォトコンテスト。「とびきりの笑顔」というテーマで1993年から行われています。 今回、そのコンテストをLIGブログで紹介して欲しいというリクエストをいただいたので、紹介したいと思います。そうです、ステマというやつですね。 ベストスマイル・オブ・ザ・イヤー2013の公式サイトはこちら (・∀・) ｽﾃﾏ ﾊ ｺｺﾏﾃﾞ! はい！ という訳で、今回の記事ではカメラのテクニックというよりは、「笑顔をどう引き出すか」という所にフォーカスしてまとめてみました

こんにちは。編集部のぐっさんです。 今回は、Tumblr初心者の私が、過去に公開したTumblr記事を再編集し、最新版に更新してみました。……え？　ちゃんと説明できんのかって？　大丈夫です。正しい情報をみなさんにお届けするため、Tumblrマスターの知人を２時間拘束し、記事を書き上げました。 以下より、私のTumblrに対する基礎知識の少なさと、Tumblrマスターの情報の正確さを兼ね合わせた内容で、Tumblrの使い方をお届けいたします。 Tumblrとは？ https://www.tumblr.com/ Tumblrとは、アメリカのDavidville.incが運営する、世界中で注目のブログサービスです。日本ではあまり認知度が高くありませんが、デザイン性のよさやブログをベースにしたコミュニケーションができることで、一定のファンがいるSNSといえます。 「リブログ」という、Web上の画像