こんにちは、デザイナーのサリーです。 休日はゲームばかりやっている私なので、ゲーミフィケーションの事例を見るのが好きです。 ゲーミフィケーションとは？ ゲームデザイン手法や仕組みを用いて問題の解決やユーザー契約などを獲得すること。例えば、既存のシステムやサービスへの、ポイント性、順位の可視化、バッジ、ミッション、レベルシステムの採用など。さらにゲームの要素を盛り込むことによって楽しみながら意図せずそれらと関わっていってもらうことが目的で行われる場合もある。 -wikipediaより- 読み飛ばしがちなサイトのチュートリアルも、スタンプラリー形式だとスイスイ進めてしまいます。今日は簡単なものからこれぞゲーミフィケーション！なものまで、事例を7つ紹介します。 ランキング ユーザーのポイントや投稿数などでランキングを作成し、ユーザー間の競争心を持たせることでサイトを活性化させます。 食べログ h

こんにちは！　小さい頃はダンゴ虫をポケットに入れて遊んでいました、きょうへいです。 よく「Web業界は日々進化している」という言葉を目や耳にします。リスティング広告も例外ではなく、日々新しい機能が生まれ常に変化していきます。新しい情報を手に入れることで、より効率的に効果的な広告を運用できるようになるかもしれません。 そのため、僕もなるべく新しい情報が入手できるように色々なサイトを見るようにしています。今回は、その一部を紹介できればと思います。 1. admarketech（アドマーケテック） http://www.admarketech.com/ アタラ合同会社取締役CCO「岡田吉弘（おかだよしひろ）」さんが運営するブログです。 検索、ディスプレイ、ソーシャル、モバイル、データ・アクセス関連の記事が多く、海外のものを中心に書かれています。業界で活躍されている方々のインタビュー記事も豊富で仕

こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増

こんにちわ段田です。 今回もWordPressプラグインにスポットをあてたいと思います。 今回は管理画面の投稿画面で役立つプラグインをテーマに紹介します。 1.Parent Category Togglerプラグイン 通常、投稿画面ではカテゴリ項目で子のカテゴリにチェックした場合、画像のように親のカテゴリには自動的にチェックが入りません。 Parent Category Togglerプラグインは自動で親のカテゴリにチェックしてくれます。プラグインインストール後、子カテゴリにチェックすると、自動的に親のカテゴリにもチェックを入れてくれます。 便利！ Parent Category Toggler 2.Save Editor Scroll Positionプラグイン 投稿を保存した時、エディタのスクロールは一番上に移動してしまいます。このスクロールの位置をそのまま動かさないようにするプラグイ

こんにちは!!　まさしです。 突然ですが、皆さんC2Cビジネスってご存知ですか？ C2C = 電子商取引の一種で消費者間取引（Consumer to Consumer）のこと つまり！一般の方が一般の方に対してビジネスを行う事をC2Cビジネスと言います。いま巷では、このC2Cビジネスが大流行の兆しにあり、ここ数年で多くのWEBサービスがリリースされました。この流れに乗って週末に小遣い稼ぎができないかなと、いろいろ見ているのですが、どれが自分に合っているのか選べずにいます。 そこで、誰でも簡単にできるC2Cサービスはどれなのか、整理してみたいと思います！「手軽そう」「儲かりそう」「続けられそう」などを基に、個人的な評価も入れてみました。（あくまでも参考までに）

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1　アンパサンド（&） テクニック2　演算 テクニック3　round() テクニック4　rgba() テクニック5　コメントアウト テクニック6　変数 テ

こんにちは、LIGの岩上です。 単刀直入に言います。 どなたか 我々が 元々借りていた 台東区入谷にある 旧オフィスを 借りませんか？ 安くて広い、お洒落なオフィスです 元々は殺風景なオフィスだったのですが、天井を抜いて白く塗り、照明を交換してあります。 パーテーションの無い、オープンなオフィスです。（家具は付属していません） 広さは40坪（140㎡）くらいあります。 かなり広いオフィスなので、突然の来客にも困る事はありませんでした。 最終的にこのオフィスに30人ほどのスタッフが働いていました。 場所は台東区。家賃は20万以下（激安）です！ LIGの旧オフィスは台東区の合羽橋商店街（最寄り駅は日比谷線、入谷駅、TX浅草駅）にありました。 アクセスが良いとは言えませんが、そこまで悪くもない、そんな場所にあります。 そして、相場よりもかなり安い賃料（坪単価5000円以下）で借りる事ができます。

こんにちは。あかねです。 デザイナーさん、エンジニアさんに作りたいものを伝えて、出来上がってきたものをチェックするのもディレクターの仕事の1つです。デザイナーさんが見る視点とは違うポイントを見ることで、デザインのクオリティをアップさせることができるかもしれない…！ 今回はディレクターとして見ておくべき、デザインチェックのポイントをご紹介します！ ディレクターの仕事の一つ。デザインチェック。 ポイント1　文字サイズ まずブラウザのサイズを1000×800くらいにします。そして画面を暗くします。そして明るくします。。。 そして見る部分は、 タイトル、見出し、文章それぞれの区別がつくか タイトルが強調されているか 行間が読みやすいよう工夫されているか 画面が暗いor明るい場合でも文字が読みやすいか です。 個人によって画面の明るさはまちまちですので、ターゲットとするユーザはどのくらいの明るさでサ

こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F

こんにちは、あゆみです。 お出かけがより一層気持ち良い気候になってきましたが、私はと言うともっぱら山に行ったりしています。先月の鬼怒沼も良かったし、今月は上高地涸沢へ行ってきました。紅葉トップシーズンは過ぎたけどすっごく綺麗で気持ちのいい場所でした。来年は槍ヶ岳と燕に行きたいな〜。 今回はそんな出先でお気軽に素敵動画を作れてしまうアプリをご紹介。写真に納めるのはもちろん、ムービーって後々見返すとその時の情景が3割増しで素敵な想い出になりますよね。今回は私が個人的に多用している4つのアプリを紹介します…が、自身がずっとiPhoneユーザーということもあり、ほぼほぼiPhone目線で選抜していますのでご容赦下さい。 あと、未婚の方は携帯のカメラで十分なので今からでも沢山ムービーを撮っておいて下さい。結婚式のムービーを作る際に後悔します。（友人の結婚ムービーを作ったのですが、カップルの軌跡を写真

こんにちは。マラガの海の贈り物セコです。 以前ライターの村上さんが「効果的に魅せる！プレゼンするなら抑えておきたい3つの基本テクニック」という記事の中で、「便利でカッコイイプレゼンテーション作成サービスも活用しよう」という事でブラウザ上で本格的なプレゼンテーションが作成・共有できるサービス「Slid.es」を紹介してました。 そこで本日は「Slid.es」のようなオンラインでかっこいいプレゼン資料を作成できるサービスをご紹介させて頂きます。 SlideShare SlideShare 最も有名かと思われるスライドショーツールです。パワーポイントのデータをアップして共有するという使い方が多いと思います。非常にシンプルなサービスですが音声ファイルとの同期も出来るため音声入りスライドショーの作成も可能です。 sliderocket sliderocket 写真や動画の挿入、グラフの作成はもちろん

フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。 なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。 あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。 ※制作環境はPhotoshop CS6以上が必要です。 ロングシャドウをPhotoshopの3D機能で作る方法 3Dオブジェクトに変換 レイヤーに右クリックして、テキストレ

デザイナーチームマネージャーのひろです。 最近、息子のアンパンマンのハマり具合に困惑しています。 アンパンマンが、画面に現れるやいなや大興奮。 軽い近所迷惑状態です(@_@;) クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね（笑） さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です！Bookmark間違いなしです！！ デザインするときに役立つWEBサービス５選 960 Grid System 横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。 http://960.gs/ Gridulator グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。 PNGを書き出せるのでとても便利です！ http://gridulato

こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。

こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu

こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles

エンジニアの王です。 そもそも「素材」というのは「何かを作るための原材料」ですから、デザイナー・グラフィッカーなどにとっての「写真素材」とは、新しい何かを作るためのもととなる写真であって、ほぼそのままアイキャッチとして使ったり、記事内で使ったりするものではありません！ 同じ「写真素材」とは言っても、使い方によっては向き不向きっていうのがありますからね。今回は特にデザイナー向けの無料で使える写真素材サイトをご紹介します！ 私は「デザイナーに優しい写真素材」とは以下のような特徴を持っていると考えています。（もちろんすべてのケースに当てはまるわけではないが） 被写体が明確 背景が単純 同じオブジェクトを複数のアングルから撮っている テクスチャ系 切抜き済み そのため、今回は以上の特徴を多く持っている写真素材サイトだけに焦点をあてて紹介したいと思います！ おすすめ順で列挙していきますので、上位にき

どうしても、こうしても、さわすけです。 今日は、ロゴを簡単に作成できる、超便利なサイトを5つご紹介します（作成したロゴデータをダウンロードするにはお金がかかります）。ランダムでデザインしてくれたロゴを使用するのもありですし、ご自身で作るロゴデザインのヒントにもなるかもしれません！　どれも操作はいたって簡単です。ロゴにしたい文字を専用のフォームに入力するだけです。フォントを選べたり色を変更できたりもします。まずはLOGOTYPE MAKERというサービスを例にロゴの作成方法をご紹介します。 LOGOTYPE MAKERを使ってロゴを作ってみた LogoType Maker http://logotypemaker.com まずは、「Logo Type Maker」を例にロゴの作成方法をご紹介します（他のサービスも対して操作方法は変わりません）。ロゴタイプとロゴマークデザイン一体型のロゴデザイ

はじめまして！まさしと申します。 元気と健康が取り柄です。今日も元気に頑張っていきましょー！ ところで皆さんの出身はどちらですか？　私はお好み焼きと牡蠣が美味しい広島県です。 最近、地域のプロモーションで、面白い取り組みを見かける事が増えてきました。一昔前は、Webサイトにチカラを入れている地域も少なかったですが、今では魅力的なWebサイトが多くなり、見ていて旅行に行きたくなってしまいますね。 今日は、その地域の良さが一目でわかる地域のプロモーションサイトをまとめてみました。 地域の観光を盛り上げるPRサイト6選 高知家 高知での暮らし情報サイト 高知家 高知での暮らし情報サイト 観光情報の発信ではなく、高知に住む人を増やすためのプロモーション。「高知県はひとつの大家族」というコンセプトで、高知県を１つの家と見立てて「高知家」というネーミング。サイトでは移住に必要な情報や、住民のインタビュ

皆様、こんにちは。メディア事業部のまゆです。 学生なら文化祭、社会人なら新企画の案出しなど、面白い企画が必要な場面は多々ありますよね。 LIGでは“面白い企画を考えるお仕事”が頻繁に来ます。そのとき、たくさんのアイディアを出すためにブレインストーミング（以下ブレスト）というものを行います。 ブレスト（英：Brainstorming）とは？ ブレストとは、集団でアイデアを出し合うことによって相互交錯の連鎖反応や発想の誘発を期待する技法である。 （Wikipedia参照） 今回はLIGでも頻繁に行われているブレストについて書いていきたいと思います。 【こちらもおすすめ】 ☞ 「ブレインストーミング」がうまくいくポイントとルール まずは「ブレスト４原則」について 1. 判断・結論を出さない（結論厳禁） ブレスト中は基本的に判断・結論はNGです。ブレストの定義は相互交錯の連鎖反応や発想の誘発の期待