【2017年版まとめ】head内になにを書けばいいの？meta、OGP、favicon | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エリカです。 Web サイトに必ず入れる「お約束」のひとつに<head>というものがあります。「 TDK 」（タイトル、ディスクリプション、キーワード）なんかもそのひとつですね。 ……って必要なのは分かっているんですけれど、つい昔作ったテンプレートのコピーになっていて、気づけば「長らくアップデートしてない……」ってことありませんか？ わたし自身、しばらくを見直す機会を持っていなかったので、今回あらためて調べてみました。 有名サイトの「meta」「OGP」「favicon」 誰もが知る有名サイトではどのようなが使われているのか、について調べてみました（ 2017 年 6 月時点）。日本語で HTML5 のサイトであることに限定しています。固有の ID や URL の部分は省略しました。 Google.co.jp <!DOCTYPE html> <html itemscope=""
デザインの参考にしたい素敵な日本語のロゴ【第2弾】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 以前、日本語のロゴだけをまとめた「デザインの参考にしたい素敵な日本語のロゴ20選」を執筆した際の皆様の反応が良かったので、その第2弾を書かせていただきます。 今回の記事も皆様のアイディアソースになれば幸いでございます。 素敵な日本語のロゴまとめ 21. ウッドベリーズ http://woodberrys.co.jp/ 「生フローズンヨーグルト」販売店のロゴですが、「ウ」「ッ」の点や濁点の形を統一することで、ロゴタイプが面白味のある形状となり、視線を左から右に上手く誘導させる、デザインになっているかと思います。 シンボルマークもヨーグルトの舌触りや、無添加の果物を使った、体に良いものであるという商品の特長を上手く表現できていて、とても素敵なデザインです。 22. 吉田養蜂園 http://www.mapion.co.jp/phonebook/M26027/1
「アイキャッチってなんだろう？」1,000個以上を制作して学んだこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕は2年半くらい前にLIGのことを知って、デザイナー募集記事をきっかけにLIGへ入社しました。そして当時メディア事業部のデザイナーだった王さんからLIGブログのアイキャッチの仕事を引き継がれ、現在ではその制作数も1000を超えました。 そこで今回は、LIGブログのアイキャッチ画像について、制作過程や制作から学んだことなどをお話しします。 そもそも「アイキャッチって何？」という方は「ブログの集客を加速させる「アイキャッチ」とそのデザインについて」をご一読いただけますと幸いです。アイキャッチの概要や必要性、効果的な魅せ方について書いています。 LIGブログはなぜアイキャッチにこだわるのか 他のメディアではフリー写真素材をそのまま使ったり、ちょっとテキストを加えただけの写真を使ったりする中、LIGブログはやたら社員を出していたり、めっち
LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中（1）社員編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 早いものでLIGに入社してから1年半以上の月日が流れました。LIGブログのデザイナーとして撮影から一枚絵の作り込みまでを担当。数々の諸先輩方からフォローしていただきながら、主に記事のアイキャッチやLIGブログ内のバナー、背景ジャックをほぼ1人で作ってきました。 ふと立ち止まって、これまでに作ったアイキャッチを数えてみると、その数は1,000個をとうに超えています。そこでキリも良いですし、今までにLIGブログで使用してきたアイキャッチのPSDデータをジャンルごとに配布しちゃおうと思います。 Photoshopを扱いはじめたばかりで、やりたい表現のイメージは頭の中にあるのにどうやればいいのか分からない。チュートリアルを探してみたけど海外のものばかりだし、よくわからない。そんな方たちの手助けに少しでもなればと思います。僕自身
【2015年度版】イケてるデザインの国内コーポレートサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので
この新卒採用サイトがすごい！2016年度イケてる企業まとめ20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、さんぺーです。 私は2015年度卒業予定のLIGの内定者だったのですが、うかつにも留年をして2016年度卒業となりました。本当にありがとうございます。 今年はアルバイトとしてLIGで働くことになりましたが、必ずしもLIGにもう一度採用されるとは限らない身の上です。最近は漠然とした不安を抱えて「2016年度卒業の学生のための採用ページ」を眺めているのですが、2016年度は特にユニークなものが多いことに気がつきました。 というわけで、今回はもう一度就活生になった私がグッと来たサイトをまとめてみます。普段からネットを舐めるように見ているIT/Webパーソンの方もお楽しみいただけると思います。 それでは、行ってみましょう＼(＾ω＾＼Ξ／＾ω＾)／ リクルートホールディングス RECRUIT革命｜リクルートホールディングス 2016年度新卒Web採用サイト http://recruit-
PhotoshopとIllustratorで画像をポリゴン風に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。 今回は人気のポリゴンスタイルの画像をPhotoshopとIllustratorで作成する方法をご紹介したいと思います。 参考サイト まず初めに今回の参考サイトから。 【Photoshop講座】人物をポリゴンスタイル風に加工する https://www.youtube.com/watch?v=Ao0XRwFaoE4 こちらの動画を参考にしました。 パペットワープのキャプチャを撮って塗り分けに使うというかなり斬新なやり方で、サクサクっとポリゴンスタイルを取り入れることができる素晴らしいチュートリアルです。 今回パペットワープは使っていませんが、アクションを使った塗り分けの手法を参考にさせていただきました。 それでは具体的な製作過程をご紹介したいと思います。 写真を元にIllustratorでポリゴンのラインを描く 1. 塗り分けの準備 まず初めに元になる
素敵な日本語のロゴ28個をデザイナーが選んでみました！【画像付き】 | 株式会社LIG
💡高品質なロゴ制作会社を知りたい場合はこちらの記事から！ こんにちは、デザイナーの藤田です。 私は最近、日本語のロゴをひたすら眺めるのにはまっております。漢字とかな文字の組み合わせは、その他の言語のロゴには見られない個性があり、とても素敵ですよね。 というわけで今回の記事は、最近見つけた素敵な日本語のロゴをまとめてみました。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※ 2014年10月16日に公開した記事を再編集したものです。 日本語の素敵なロゴ 眺めていて素敵で、デザインの勉強にもなるようなロゴを集めています。 1.
登録不要で無料のWebサイト分析ツールとサービス8選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIG 執行役員の寺倉と申します。 自社サイトの分析、競合他社、類似サイトの発掘と分析は、KPI設定や改修、WEB戦略を立てる上で非常に重要です。 今回は登録不要、かつ無料で使えるサイト分析ツールとサービスを8つほどまとめてみました。これが誰かのお役に立てば幸いです。 株式会社LIGとは 2007年設立、東京都台東区発のWeb制作会社。年間150サイトリリース、毎年複数のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作実績 お問い合わせはこちら マジで使える無料のWebサイト分析ツール&サービス8選 類似サイト検索：Google（コマンド検索） https://www.google.co.jp/ 類似サイトを
マネジメント職や事業責任者におすすめしたい書籍7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGの岩上です。 「組織文化」「リーダー」「経営理念」「モチベーション」「事業戦略」「経営」などのキーワードでピンとくる書籍を月に10〜15冊位は読むようにしています。 今回は最近読んだ中で、オススメできそうなものをご紹介します。 部下を持ったら必ず読む「任せ方」の教科書「プレーイング・マネージャー」になってはいけない 60歳にしてライフネット生命を岩瀬大輔さんと創業し、現在もCEOの出口治明さんの著書。 プレイングマネージャーではなく、「任せる」マネージャーになるための考え方から実際の業務の振り方までが書かれています。 丸投げではなく権限と期待を明確に提示すること、適材適所の考え方など、実際の現場での経験が元になっているようです。 部下を持ったら必ず読む 「任せ方」の教科書 「プレーイング・マネージャー」になってはいけない (ノンフィクション単行本) 「ついていきたい」と思
英語も学べて一石二鳥！webデザインやコーディングが学べる良質な海外サイト10選
日本のみなさん、こんにちはぁ！バンクーバーでWebを修行をしているのび太です。 Web制作を学ぼうと思ったらいろいろな方法があると思います。専門学校に通う（王道）、オンラインの通信講座を受ける、プロのWebデザイナーにレッスンをお願いするetc。 Webを勉強する1つの方法として、ネット上のWeb制作に関するサイトを利用するというのがあると思います。スクールに通ったり、通信講座を受けたりするのはお金の面で負担がかかりますからね… ありがたいことに今の世の中わかりやすいWebを学べるLIGのようなサイトが仰山あります。強い勉強意欲と気合さえあればオンラインのソースや教材をフル活用することで独学でも十分学べると思います。 その際に日本語サイトだけでも十分学べますが、あえて英語サイトを使うことで以下のようなメリットがあると思います。 Webと同時に英語が学べる。 日本語サイトより詳しく学べる。
まるで自分の意思があるかのよう！canvasサイトまとめ12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう！ My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの
「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG
フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。 なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。 あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。 ※制作環境はPhotoshop CS6以上が必要です。 ロングシャドウをPhotoshopの3D機能で作る方法 3Dオブジェクトに変換 レイヤーに右クリックして、テキストレ
夏休み四日目☆燻製器を100均で買った道具でつくってみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログをご覧の皆様、どんな夏をお過ごしでしょうか？ 夏休み四日目のレポートは、ゆうせいがお送ります。 私が今回、レポートの題材に選んだのは「燻製」。そう夏のイベントの定番、バーベキューなどで外せない、あの「燻製」です。 なんでも、たったの315円で燻製器がつくれるという噂を耳にし、こいつぁゲームやってる場合じゃねぇって飛び出してきました。 100均で買える道具で燻製器をつくる まずは道具を揃えに100均へ。ここで買うものはたったの3つです。 ステンレスボール（24cm） これを2個買います。 焼き網 丸タイプ（24cm） ボウルの内径より小さいサイズの網でもOKです。今回は同サイズを選択。（と言うよりもこれしか売ってなかった） これだけで燻製器の完成 たったの315円で完成した燻製器がこちら・ステンレスボールを向かい合わせで重ね、間に焼き網を挟むだけの簡単なお仕事です。
月間PV/UUどのくらい？好きなサイトの月間PV/UUを調べてみました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。代表の岩上です。LIGではコーポレートサイトをメディア化するべく色々と試行錯誤しながら、やれ今月はPVはどれくらいいきそうかなどメディア事業部をつついております。今回、ふと、自分自身が良く見ているサイトのPVやUUはどうなのだろうと調べてみたので、分かる範囲で共有します。 Tech Crunch Tech Crunch 海外、国内問わずベンチャーに特化したニュースサイト。ターゲットを絞った上で190万PVはスゴイですね。ターゲット層もIT関連企業で先進的なユーザと明確です。2006年のTechCrunch Japan立上げから僕もずっと見てます。 月間UU：80万 月間PV：190万 メディア資料[PDF] CNET Japan CNET Japan IT系の総合ニュースサイトです。1000万PV以上はさすが。ここ最近、IT系のブログメディアが増えてきてるので、過去から現状の経
【実例つき】写真編集ソフト「Photoshop Lightroom」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ミッション！ ではさっそく、今回のミッションを発表します。 こちらの写真を・・・ こちらの写真に変えるのです！ そもそもAdobe Photoshop Lightroomとは？ 「Photoshop」という単語が入っているけど、「Photoshop」とはどういう関係なの？と、Lightroomが初耳の方なら誰もが首を傾げるでしょう。 公式サイトの文言を見てみましょう。 Lightroom とは何ですか？また、どのような人を対象としていますか？ Adobe Lightroom は、初心者からプロフェッショナルまで、あらゆるレベルのユーザーが写真に必要なすべてのツールを搭載しています。Lightroom は、コンピューター、Web、iPad、モバイルデバイスなど、どこにいても写真を整理、編集、共有できます。お気に入りの写真を編集したり、フラグ付け等の作業をしても、他のデバイスにも全ての編集作業
楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-
【デザイナー厳選】バナーデザインの参考ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは！ Webデザイナーのえびちゃんです。 バナーデザインを作成していると「レイアウトが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう？」……などなど、デザインの悩みってたくさん出てきますよね。 そこで今回は、そんなあなたに現役デザイナーがおすすめするバナーデザインの参考サイトをジャンル別に分類して紹介します！ 後半では実際に効果の高かった広告バナーのデザインも紹介しているので、ぜひ参考にしてください。 「ググってわからないこと」が一瞬で解決するかも？ Webの知識を効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方へ。LIGが運営のWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」では実践的なカリキュラムで最短6ヶ月でWe
VPSでWordPressを動かせる環境をコンソールから構築する！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはっ！ てっきりコンパネ付きと思って借りたVPSがコンソール操作でげげっ！となったライターの内藤です。 今やワンコインでVPSを1か月レンタルできる時代です！ 共用サーバの速度に不満だったり、ちょっと高負荷なことをしたいときに、費用を抑えようとしたらやっぱりVPS。 ※VPSについて詳しくは、tetsuさんの記事「これでVPS(仮想専用サーバ)マスター!? VPSの基礎講座」をご覧ください。 VPSは大抵コンソールからの操作でサーバを構築するところから始まります。 （※例外的に普通のレンタルサーバのようにコントロールパネルでの操作ができるサーバもあります。） 今回はWordPressを動かせる環境をコンソールから構築する方法を簡単にご紹介いたします。 ※CentOS6.2(x86_64)をベースに話を進めます。 ※SSHでの接続方法やviの操作方法については解説しません。 ※ドメイ
目指せ効率化！レスポンシブWebデザインを制作する際に役立つサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのももこです。 直近は、雨の降る鎌倉でアイドルに大量の和菓子を渡す忙しい日々を送っております。 今回はレスポンシブWebデザインのサイトを制作する際に役立つツール、Webサイトを6つご紹介します。 The Responsinator iphone・Android・iPad・Kindleの枠にそれぞれWebサイトを嵌めこんで表示してくれます。シンプルなデザインの枠が素敵です、縦横表示を同時に見れるのも利点ですね。 http://www.responsinator.com/ Responsive Web Design Test Tool モニターの大きさを変えてリアルタイムにレスポンシブの動作確認が出来ます。 画面にメモリがついており、右上に画面サイズも出ているので使いやすいです。 スマートフォンからデスクトップまで各製品の画面サイズも用意されており、お手軽に利用できます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
