こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ

お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。

こんにちは、ソウルドアウト株式会社のなごです。 Web制作で収入を得たい・増やしたい人にとって、バナー制作は空いた時間でサクッとできるのでおすすめです。 昨今は、クラウドソーシングによってバナー制作を外注する企業が増えてきているので、そこまで高度な技術がなくとも、5,000円～50,000円のスポット収入が得られます。 今回は、バナー制作によって、簡単にお小遣い稼ぎをするために必要な知識をすべてまとめました。社会人や学生、主婦の方など、空いた時間にお小遣い稼ぎをしたい人にも、Webデザイナーとして独り立ちするために実績を積みたい人にもおすすめです。 「成果が出る」バナーを作るには？ バナー広告の制作には、デザインスキルだけでなくWebマーケティングやコピーライティングのスキルも重要です。とくに副業や就転職を見据えてプロレベルのスキルを身に着けたい……という方は、Webの知識を総合的に学べる

こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル

こんにちはエリカです。 ゴールデンウィークが来ると、いよいよ夏という気がしてきますね。 2015年後半に向かって変化してくるこのシーズン、改めて自分のウェブサイトを『解析』し直してみるのはいかがでしょうか？ 解析・分析というと難しいイメージですが、1時間もあれば今日からすぐ始められるのです。 Googleアナリティクスを中心に、おすすめの記事を集めましたのでぜひご覧ください。個人的なおすすめ度も添えてみました！ 準備〜導入編 これからGoogleアナリティクスを始めようという方に読んでいただきたい記事です。 ただ慣れている方でも普段使わない機能や、後から追加された機能のことは意外と知らないので、おさらいしていただくとおすすめです。 「Googleアナリティクス」ってなに？ 無料アクセス解析ツールの定番「Googleアナリティクス」の意味と導入方法を知ろう https://liginc.co

こんにちは、ひろゆきです。 僕はWebサービスをつくりたくてエンジニアになったのですが、プログラミング言語は数が多く仕様もさまざま。「プログラミングには興味があるけど、どの言語から手をつけるべきか分からない」という方も、多いのではないでしょうか？ 今回プログラミング言語の中でもPHPをご紹介するのは、初心者でも比較的とっつきやすく、前知識がほとんどなくてもブラウザ上で動かすことができるので、エンジニア入門に適しているからです。 プログラミングでモノ作りをしたいと考えている方は、PHPから始めることをおすすめします。 今回は「無料PHPスクール」を運営している「株式会社ドリーム・シアター」の中田さんの情報提供の元、LIGブログでのif文やwhile文の事例など、PHPを勉強する前に知っておきたい基礎知識をまとめてみました。 中田斉道（なかた せいどう）さん PHP／Javaを中心としたWeb

提案書や企画書の作成は慣れが大事。慣れるまでは効率のいい作成の仕方がわからず、完成までに膨大な時間を要してしまう人もいるのではないでしょうか。 今回は「ほかの人の企画書を盗み見できるサイトやページ」をご紹介します。見せ方や考え方、そしてそれを先方に伝えるためのノウハウが詰まりまくっているので、見て損はないと思います。 それでは、見てみましょう！ 未経験から6ヶ月でWebデザイナーを目指しませんか？ クリエイターに興味があるけどなり方がわからない、Web業界への転職を目指している……という方は、「スクールでの勉強」もおすすめです。将来について悩んでいる方はぜひ一度LIGにご相談ください！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ さまざまな企画書を盗み見できる Web サイトまとめ 1. alle https://the.alleslide.com ボリュームがすごいです。 2

こんにちは、デザイナーのぺちこです。 10月か11月頃から TED（Technology Entertainment Design）Talks に完全にハマっています。隣のデザイナーからは「回し者じゃないか」と言われたりします。 毎日パソコンの前に座ってインターネットをうろちょろしていても、結局は自分の知っている分野の知識を取り入れるくらいしかできないのですが、TEDを適当に漁っていると、そんな研究してる人いるの？っていうくらいマニアックな研究と出会うことができます。 油断して観始めた動画に某害虫の話が出てきた時は本当に後悔しましたが、研究の着想を得る対象は無限大だと学びました。涙 ということで、毎日いろんな分野の動画を観ている中で、Web制作時の考え方に良い影響を与えてくれるんじゃないかなあと感じた動画をいくつかご紹介したいと思います。 あなたの（そして何十億人の）ための巨大なウェブデザ

オウンドメディア運用チームLIGMOのハマです。最近では、オウンド・オウンドメディアを立ち上げて、コンテンツ設計の手法を実験したりしています。大げさに言いましたが、ただの個人サイトのことです。 サイトの記事を書くときに悩ましいのが、何と言っても使用する画像の選定です。 自分で写真を撮影することもありますが、お気に入りのフリー写真素材サイトのお世話になることも多いのが実情です。ただ、最近では「いつもとは少し違った写真を使ってみたいな」という欲も出てきています。 そこで、今回は少し視点を変えまして、「Googleの画像検索」によって「著作権フリー＆商用利用OK」の写真素材を探し出してみようと思います。 お題 著作権フリー＆商用利用可の画像を探せ！ モチーフは「かわいい子には旅をさせよ」 条件 Googleの画像検索を使用すること サイズは「横655px、縦437px」で使用できるものに限る（L

「ああ、ヨシキさん。…今日からよろしくね」 この人は社長の岩上貴洋さん。 24歳でLIGを立ち上げた若手の起業家だ。

こんにちわ！　初心者エンジニアのドドリゲス・パンチョフ・ブジョンヌィ5世です。ひろゆきです。 今回はWordpressをカスタマイズする際によく使う条件分岐タグをまとめてみました。 目次 条件分岐タグとは is_home() メインページ判定 is_single()　詳細ページか判定 is_page()　固定ページか判定 is_category()　カテゴリアーカイブか判定 is_tax()　タクソノミアーカイブか判定 is_post_type_archive()　ポストタイプアーカイブか判定 is_author()　筆者アーカイブか判定 is_singular()　投稿タイプの詳細ページか判定 is_preview()　プレビューページか判定 まとめ 条件分岐タグとは 条件分岐タグとは、現在どこのページが表示されているかを判定するための関数です。例えば、ヘッダーをheader.phpとし

Bootstrap3の無料テーマ＆テーマ集まとめ BlackTie.co http://www.blacktie.co/ 最近衝撃を受けたフリーのテーマ集。どのテーマもかっこよすぎて涙が出ます……ありがたや……ネーミングとロゴもかわいくてきゅんとしますね。 テーマ数は現在（2015年6月時点）25個あり、今後の追加も楽しみですね。 Bootswatch http://bootswatch.com/ こちらもテーマ集です。Bootstrap2の頃からありましたが、3にも対応したようです。フラットデザインにするなら「Flatly」がおすすめ。 Start Bootstrap http://startbootstrap.com/ こちらもテーマ集。管理画面用やポートフォリオ用など、いろいろな用途別に作られているのがありがたいですね（「Sponsored」のタグがついたものは有料なのでご注意！）。

（編集部注：2013年12月4日に公開された記事を再編集したものです。 ※無料で商用利用可のところばかりですが、中にはアイコン1個1個でライセンスが違うものやコピーライト記載が必要なものもあるので、ご使用の際には随時ご確認ください。） こんにちは。デザイナーの白浜です。 フラットデザインが流行りなこともあり？最近何かとピクトグラムアイコンを探す機会が増えました。（余裕があれば自作モノも増やしたいところですが！） でも、いつも同じところだとマンネリになりがち……。 他のデザイナーさんはみんなどこみてるんだろう？？とアンケートをとってみたところ……今まで知らなかったところが結構出てきました！ メモがてら、まとめてみたいと思います。 【こちらもおすすめ】 ☞ 質高すぎ！ベクター素材をフリーでダウンロードできるサイトまとめ LIGデザイナーが厳選！使えるフリーのピクトグラムまとめ Endless

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

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

皆様こんにちは。メディア事業部のまゆです。 過去にディレクターの勢古口がミニマルデザインに関する記事を公開しました。それに便乗して今回私は映画を題材としたミニマルデザインをご紹介しようと思います。 ミニマルデザイン（Minimal Design） あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 必ずしも外観のデザインに限った用語ではないが、外観について言うことが多い。装飾や凝った形状は排除され、平面や直角が多用される。塗装も省略ないし簡易になるため、色調は単色が多いが、木製品では木目をあらわにすることも多い。 （出典：wikipedia） 映画を記号で表現したミニマルデザイン ポーランドのグラフィックデザイナー Michal Krasnopolski 氏の作品です。定められたグリット内に存在する円弧、対角などの線と配色でデザインをし

デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー