こんにちは、デザイナーのみやです。 僕の地元では電車のドアは手で開閉します。襖のように左右に手で開けるのですが、未だにこの癖が残っていてたまに手を持っていかれます。 ところでデザイナーの皆さんは、どのようにウェブデザインを勉強していますか？ 僕は最近、ウェブサイトのトレースを始めました。 トレースとは、実際のウェブサイトをキャプチャしてその上から全く同じサイトを作っていく作業のことになります。 実際に手を動かしながらサイト構造やトンマナを学べるため、非常に効果的な勉強法です！ 今回はこのトレースを効率良くおこなうためのツールをご紹介します。 ウェブサイトの勉強で何をすればいいか分からない方や、なかなか時間が取れない方などにおすすめです！ Google Chrome拡張機能 サイトのキャプチャに便利な『Awesome Screenshot』 https://chrome.google.com

はじめまして！　10月に株式会社LIGへ入社したデザイナー兼ディレクターをしているのんちゃんです。今年の3月に大学を卒業したばかりの23歳です！ わたしは新卒として働くまでに、インターンとしてさまざまな職種を経験してきました。日本の企業のみならず、ときにはインドの企業で、営業、ディレクター、デザイナーなどとして、3社のベンチャー企業に全部で2年間ほどお世話になっています。 そして、営業職として大手に新卒入社しましたが、半年で退職することにしました。そんな私がいま、感じていることを赤裸々にお伝えします。 1. 正解はどこにもなさそう 大学時代にベンチャー企業でインターンをしていたわたしは、「大きななにかに取り残されている」という漠然とした不安な気持ちを抱いていました。 大手に入れば正解を知っている人がいる気がした お恥ずかしい限りですが、わたしは成功への正しい道のりや、営業の正しい仕方といっ

こんにちは、きょうへいです！ 僕は普段、「LIGブログの広告枠をいかに収益最大化させるか」を目標としたマーケティング業務を担当しています。 LIGブログの広告枠以外にも、Google AdWordsやYahoo!プロモーション広告、Facebook広告の運用など、たくさんの数値データを日々追いかけています。 マーケティング担当の皆さん、追いかけるべきデータの把握は大丈夫ですか？ さて、僕自身がそうなのですが、多くのマーケティング担当者の方にとって大きな悩みの1つは「見るべきデータが多種多様であること」ではないでしょうか。 LIGはまだそこまで大きな会社規模ではなく、僕が取り扱うデータの種類も限られているのですが、それでも複数のデータを管理・把握するのはなかなか大変です。 特に、最近は多くの企業でビッグデータの重要性も増している中、膨大な量の個別キャンペーンや売上データを包括的に理解すること

こんにちは。づやです。 WordPressのメディアライブラリって便利ですよね。 デフォルトだと投稿者以上の権限の人が使える画像をアップしたりできるあの機能です。 ただこの機能、他のアカウントがアップした画像とかも一覧にでてきちゃうんですよね。さすがに他人がアップした物は削除はできないのですが、一覧に出したり使用したりは可能です。 場合にもよるんですが、管理者(編集者もかな？)以外は自分のアップしたファイルだけ見れれば十分な気がします。自分がアップした画像を他の人に見られたくないことも。 それで、なんとかしようと思ってコードを追ってみたんですが、いまいちGoodなフックがありません。 絶対あると思うんですが。(´・ω・`) とりあえず、query_stringで力技でなんとかしてみました。 //functions.phpにでも書いておく add_filter('query_string',

こんにちは！　LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近よく、無料動画のオンライン学習サイト「schoo」さんで授業させていただく機会があるのですが、先月のHTML5の授業はおかげさまでものすごく視聴していただいたようです。ありがとうございます。 具体的な数字はよくわからないのですが、なんかこう、とにかくものすごく視聴していただいたようです。 そのHTML5の授業を行う際に、改めてWeb上で資料を集めまくったのですが、HTMLとかSEOの情報は誤解も多いので、やはり一番信頼できるのはW3CとかGoogleとかの公式文書だと思うんですね。 そんなわけで、今回はHTML5、SEO関連で信頼性の高いであろう公式文書をまとめてみました。ご覧くだされ。 もくじ HTML5関連 HTML5 | W3C HTML Living Standard | WHATWG H

どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘

こんにちは。GoogleChrome（グーグル・クローム）をこよなく愛する男、鮫島です。 仕事でもプライベートでもChromeを使いまくっているのですが、今回は超絶便利なChromeの拡張機能（エクステンション）をいくつかご紹介します。 これを全て使いこなせれば、業務の効率は確実に上がるので、特にWeb制作のディレクターの方にオススメですよ！ もちろんディレクター以外の人も使える拡張機能はたくさんあるので参考になれば！ そもそもGoogleChromeの拡張機能（エクステンション）ってなんなの？ 一言で言うと、Chromeに機能を追加するためのもの。Chromeにはいろいろな拡張機能が用意されていて、インストールすると、ページ全体のキャプチャを撮ったり、不必要な広告をブロックしたりする機能を追加できます。GoogleChromeのデフォルトの機能で物足りない方にオススメです。人によっては、

こんにちは、ナイルのじつかわです。 前はヴォラーレという会社でしたが社名が変わりました。以前SEOの記事などを書いていましたが、最近の仕事としてはコンテンツマーケティングに関わることが多くなってきています。 今回はそのコンテンツマーケティングについて、よくある誤解と、根本にもつべき考え方をご紹介します。 「コンテンツマーケティング＝ブログで集客」ではない 「コンテンツマーケティング」というキーワードを非常によく聞くようになりました。また、ありがたいことにコンテンツマーケティングに関する相談をよく受けるようにもなりました。 しかし、その中で一つ気になっていることがあります。それは、「コンテンツマーケティング＝ブログ記事の執筆」だと思っている人が非常に多いこと。 もっというと、「ブログでPVを稼ぐこと」そのものが目的になってしまっていて、マーケティングの目的を見失ってしまっている状態をよく見か

こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは

こんにちは、管理課でありながらエンジニア（?）のtetsuです。 MySQLでrootパスワードを紛失したり、またはパスワードが行方不明になったりしたとき、MySQLへの接続が出来なくなったら冷や汗ものですよね？ よくこんなエラーに遭遇します。 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 今回は、このような場合でも、MySQLのrootのパスワードをリセットする方法を紹介します。 サーバの環境はCentOS、MySQL上での説明になります。 サーバへ接続 まずはサーバへSSH接続をします。これを行えないと話が始まりません。笑 SSH接続については省略します。 起動しているMySQLを停止 MySQLサービスを下記のコマンドで一旦停止させます。 service mysq

オハヨウからオヤスミまで。ディレクターの鮫島です。 今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。 第1回となる今回は、ワイヤーフレームの役割や考え方など思想的な部分をお伝えします。 第2回はワイヤーフレームの作成前に準備するべきことなどをお伝えし、第3回は実際にどう書いたらいいか、などをお送りする予定です。 ワイヤーフレームの書き方や考え方は人それぞれ微妙に違うかとは思いますが、私の考え方が少しでも何かの参考になれば嬉しいです。 ワイヤーフレームとは 簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。 例えば家を建てるとき、設計図面がないと大工さんはパニックになりますよね。きっと。大工さんみんなの認識が

Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ

こんにちは、デザイナーのまきこです。 ずっと応援してきたアイドルの方が年末にグループを卒業してしまうとの発表をうけて、木枯しが一層つめたく感じられる今日このごろ。失恋のような胸のくるしさをデザインの糧にしない手はないと言い聞かせつつ、日々業務に励んでいます�。 さて、話題は変わりますが、日本語のタイトルやロゴをデザインするのって、むずかしいですよね。漢字やひらがな、カタカナが混じっていると統一感を出すのが難しかったり、アルファベットよりも形状が複雑なので、パスをいじってバランスをとるのに四苦八苦したり……。 そこで今回は、日本語のタイトルやロゴをデザインするときにヒントになりそうな、ストックしておきたいアイデアを一気に13個ご紹介します。できるだけ多くのパターンを出してデザインの候補の幅を広げたり、「こっちの方向で行こう！」と思えるカタチまですばやく到達したいときのためにストックし、役立て

こんにちは、デザイナーのまきこです。 iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。 ところで、デザイナーのみなさんは、普段作業をしているときに「このままのデザインだと、なんかさみしい�」「もっとにぎやかにしたい」と思ったことはありませんか？ そんなときは、制作物に応じた「にぎやかし」をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが「なんかさみしい」と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します！ ▼ デザインアイデアに詰まったときはこちらもどうぞ。

こんにちは、エンジニアの王です。今回は、Git初心者を悩ませるリベースについて解説してみたいと思います。 リベースが初耳 リベースを聞いたことはあるけど、使っていない 不安を抱えながらも、リベースをなんとなく使っている 上記に当てはまる方は、ぜひ読んでくださいね。 リベースで何ができる？ コミットが綺麗になる！　以上です！　この一言に尽きる！ 具体的にどのように綺麗になるかというと…… コミット履歴がわかりやすくなる コミットメッセージを後から変える コミットの順序を後から変える 2つ以上のコミットを1個に統合する 一度コミットした内容を編集する といった具合でしょうか？　整理整頓が好きな方は、ぜひリベースを使いこなしていただきたいと思います！ マージとリベース 2つのブランチの変更点を統合するとき、Gitの最も一般的なやり方は、マージとリベースを使うことです。マージは初回で説明したので、

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

こんにちは、店長です。 先日、第10回 HTML5minutes 〜triton-js〜にて初めてLTをさせていただきました。 初めてということもあり緊張して、LTではすべてを伝えきれなかったので、今回はそのときにお話したテーマについて加筆しながら紹介していきたいと思います。 マテリアルデザインのアニメーションを取りあげた理由 今回このテーマを取り上げたのは、マテリアルデザインにおけるアニメーションは大事な要素の一つとして考えられているからです。 マテリアルデザインの原則の一つとして以下があげられています。 Motion provides meaning （モーションは意味を提供する） ユーザーが何かアクションを起こすことはコンテンツの変換点です。 自分のおこなったアクションに対して意味のあるモーションが起こることで、注意を引いたり、UIの理解を助けたり、ユーザーに連続的な体験を提供する手

こんにちは、ディレクターの溜水です。 LIGではプロジェクト管理にRedmineというツールを利用しています。 今まで使用したことがなかったので、「何ができて、何が良いのか」を自分の勉強と兼ねて簡単にまとめてみました。 【こちらもおすすめ】 ☞ 時代は共有！タスク管理を共有できるWebサービス12選 Redmineで何ができるの？ Redmineとはオープンソースの「プロジェクト管理ツール」です。 複数人でのタスク管理と進捗管理の情報共有がオンラインで簡便に行えます。 試しに「プロジェクトテスト　サイトリニューアル」というプロジェクトを作ってみました。 Redmineの何が良いの？ 早速、Redmineの魅力を以下に挙げていきます。 プロジェクトに関わる作業、スケジュールを確認できる 個人的にRedmineで一番良いと思うのは、「ガントチャート機能」で、いわゆる工程表です。 「チケット」と

先日Developers Summitデビューしました。こんにちは、先生です。 前回公開した記事「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」の反響が大きかったので、そこで使われているWebPackというModule Bundlerをもう少し深く掘り下げていきたいと思います。 WebPackとは WebPackは静的なファイルの依存関係を解決しつつ結合したり分割したりするツールです。非常に多機能でカスタマイズの幅が広いのが特徴です。 http://webpack.github.io/docs/ 個人的な経緯ですが、require.js -> Browserifyを経てWebPackに落ち着いたところです。 WebPackはnpmを使ってインストールします。 npm install webpack -g ※ npmが使えない方はまずNode.jsをインストールしてく

お疲れさまです、デザイナーのモモコです。 今回は写真の見せ方やアニメーションが可愛いWebサイトをまとめました。 要素の見せ方やアニメーションが素敵なWebサイト7選 IBUKI http://www.shiseido.co.jp/gb/ibuki/ 『「なんでも来い」の私へ。』を掲げる、資生堂 イブキのWebサイトです。 要素がぱたんと倒れるような商品の見せ方や、図形模様のパララックスがスタイリッシュですね。 ごろっとグラノーラ http://www.gorogura.jp/ 日清シスコから発売しているごろっとグラノーラのWebサイトです。 随所から素材感が伝わってくるあしらいが可愛いです。 要所要所で使われるアニメーションで、内容が読みやすく工夫されています。 LALAN http://www.lalan.jp/ リボンブラで有名なワコールのブランド、ラランのWebサイトです。 女性ら