アイキャッチデザインで参考になるWebメディア37選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ インハウスデザイナーのぱんちゃんです。 入社して一年、LIGブログのアイキャッチ画像をひたすらに作ってきました。これまでのLIGのアイキャッチは、記事の魅力が最大限伝わればトンマナはなんでもOK！ ユニーク万歳！ でしたが、CIが変わりちょっぴり大人なLIGになった今、より信頼感やプロフェッショナルさが伝わるアイキャッチに変えていこうと試行錯誤をしています。 新たなLIGらしいアイキャッチはなんだろうと考えたときに「まずは世の中にある素晴らしいアイキャッチを知ることから始めよう！」と思い、他企業・他メディアのアイキャッチの分析を始めました。 今回はクオリティの高いアイキャッチのWebメディアを37個紹介します。 アイキャッチを制作するデザイナーの方、メディアサイトを制作されている方、アイキャッチのディレクションをする方にとって参考になれば幸いです！ 紹介したいWebメディアが
簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
伝わる図解の作り方～レイアウトや配色のポイントを解説～ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ かれこれ3年ほどLIGブログで記事を書いていますが、最近意識していることがあります。それは、文字だけではなく、できるだけ視覚的に情報を伝えるということです。最初は文章を書くことに必死でしたが、よりわかりやすく、最後まで楽しく読んでもらうにはどうしたらいいかを考えるようになり、たどり着いたのが「図解」でした……！！ 今回は、図解を作るときのポイントやグラフ作成時にやりがちな失敗例、ストックしておくと便利なチャート図のデザインパターンをまとめてみました。 【図解を作るときにおすすめの素材】 👉フリーイラスト素材サイト39選【デザイナー厳選】 👉無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 【一からWebデザインを学びたい方へ】 現場で活かせるWebデザインの基礎をしっかり学びたい、現役デザイナーに教えてもらいたい……という方は、
無料のA/BテストツールGoogle Optimizeのここがすごくすごい！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。今回は久々にWebディレクターっぽくツールの話です。 サイトを運用するうえで極力おこなっていきたい、A/Bテスト。みなさんはどんなツールを使っていますか？ 私はGoogle Optimize（グーグル・オプティマイズ）を使っています。 今回Google Optimizeのここにすごく感動した！ というところをまとめます。 Google Optimizeとは ウェブサイト、A/B テスト、パーソナライズのソリューション – Google オプティマイズ まずはじめに、Google Optimizeの概要をお伝えしましょう。 Googleが提供しているサービスで、A/Bテストを無料で簡単に実施できるものです。タグを埋め込むだけで改修をおこなえ、指定の確率でオリジナルと出し分けすることができます。 さらに要素の位置をドラッグ&ドロップで移動できたり、
【SEO対策】画像形式WebPでデータを軽減し、検索順位を上げよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そのなかでもみなさんが気になっているのはWebP（JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えた静止画像フォーマット）対応だと思います。実装にはいくつか方法があるのですが、まずどうやってWebP形式の圧縮画像を作ればいいのか。 一つひとつの画像を圧縮・WebP変換するにはGoogle謹製の画像処理サービス Squoosh がおすすめです、という話を前回させていただきました。しかし、このサービスの難点は、複数画像の一括処理がブラウザ上ではできないこと。 そう、「ブラウザ上では」。 コマンドライン版Squoosh 実はSquooshはコマンドライン版というものが存在します。というかむしろこっちが本命だと思われます。ちなみに今回の内容も非エンジニア向けなので、CLI（コマンドラインインターフェイス）と呼ばれるあの黒い画面にアレルギーが発症しない方はぜひトライしていただきたいです。 利用
サイト公開前のブラウザチェックを簡単に行う方法。不具合発見後の対応も解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
うどん県出身・Webディレクターのセイタです。夏にジムへ入会しましたがバキバキな身体にはなりませんでした。来年の夏はビーチのスターになれるようにやっていきます。 さて今回は、制作したWebサイトの公開前に必ず実施する、ブラウザの表示テストについて学び直したことをまとめました。 制作が完了し、これでリリースできる！ と喜ぶのはまだ早い。このテストを完了させてこそ、はじめてきちんとした状態で公開を迎えられるのです。 なぜブラウザの表示テストを実施するのか？ 先に結論から言うと、さまざまな端末およびブラウザにおいて制作したWebサイトの品質を担保するためです。 もう少し柔らかく言い直すと、ユーザーは様々な環境でWebサイトを閲覧するため、どの環境においても問題なくWebサイトが表示されるようにテストする、ということです。 ユーザーが閲覧する環境は端末だと、下記がありますね。 Windows Ma
Webサイトリリース前に確認すべきSEO内部施策10項目をご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作事業部WebディレクターのZIMAです。 みなさん、SEO内部施策やってますか？ やっていないわけないですよね。しかし「どこまでやってますか」と聞かれると……困っちゃう人多いのではないでしょうか。 実は自分もどこまでやればいいんだろう？ と思って、我らがづやさんに聞いてみたところ「ふむふむ、それなら、 ちょうどいいの作ってるから、勉強がてらZIMAがつくってみてよ」と、ひょんな流れから私がLIGのSEO内部施策チェックリストを作成することになりました。 せっかくなのでブログにして自分の学びをみなさまに共有したいと思います！ そもそもSEO内部施策ってなんだ？ Webサイトの中身をGoogleなどの検索エンジンに正しく伝えたり、ユーザーがストレスなく利用できるようユーザビリティを向上させるための施策のことです。 世界中のWebサイトをクローリングしているのは簡単に言えばロボッ
たまに役に立つWordPressのカスタマイズ5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのづやです。 ありがたいことに、この業界で15年程度生き抜くことができまして、質問を受けたりレビューをしたりする機会が多くなってまいりました。 しょっちゅう必要ではないのですが、カスタマイズが必要になった際に解決したことを今回まとめてみました。 非公開ページを親ページにしたい 皆様はWordPressをGutenberg（グーテンベルク）で使われているでしょうか。 URLを綺麗にしたいときなど、固定ページで非公開の親ページを選びたいときがありますよね。 page_attributes_dropdown_pages_argsとかquick_edit_dropdown_pages_argsにフックしてたと思うのですが、グーテンベルクになってからは、ここもrest apiで取得しているようで効かなくなってますよね。 add_filter( 'rest_page_query'
AdobeXDで更新しやすいテーブルの雛形を作ってみた〜コンポーネント・スタック・パディング機能の活用〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのイナッチです。 今回は、Adobe XD（以下：XD）で更新しやすいテーブルのひな形を作りましたので、ご紹介します。 せっかくなのでなぜ更新しやすいテーブルを作ろうと思ったのか？ なぜ作れたのか？ などの背景も合わせてご紹介いたします。が、そんなことはいいから早くテーブルを見たい方は、もろもろスキップしてこちらからどうぞ。 XDで更新しやすいテーブルができるまで XDといえばWebサイトなどの画面デザインのためのソフトというイメージですが、その使い勝手の良さから、デザイン以外の場面でも活用する機会が増えてきました。たとえばLIGのアカウントプランナーのノブさんは、企画書（提案書）をXDで作られるそうです。
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
フリーイラスト素材サイト39選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ 最近イラストのご依頼をいただくことが増えています。描くのは楽しい反面、時間がかかってしまうこともしばしば……。 そんなときの時短テクニックとしておすすめしたいのが、「ロイヤリティフリーのイラスト素材」です。自分のイラストと組み合わせることもできますし、構図や配色の参考としても役立ちます。 この記事では、無料で使えて、商用利用もできるフリーイラスト素材サイトをカテゴリーやテイスト別にまとめています。イラストは作者によって絵柄や表現の仕方に個性が出やすく、イメージに合ったものを見つけるのが難しいですよね。日頃からさまざまなテイストのイラストをストックして、引き出しを増やしておくことが大切です。ぜひイラストを探すときの参考にしてみてください！ イラストも作れるWebデザイナーを目指すなら…… イラストの制作のテクニックや基礎的なデザインスキルを一から学びた
【2018年WordPress魔改造TOP3】第1位：よくある「不動産サイト」をつくる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
夏に引っ越した新居の日当たりがあまりにも悪く、軒並み弱った植物たちを先日会社に疎開させました。内覧に行ったのが夜だったのが失敗でした。2018年最大の失敗といっても過言ではありません。 こんにちは。バックエンドエンジニアのリョウタです。 やーっとWordPress5.0がリリースされ、実案件にも徐々にGutenbergを取り入れはじめています。旧来の「カスタムフィールドもりもり+AddQucickTagでエディターのタグを制御」のコンボから脱することができそうで嬉しいです。 魔改造３部作、栄えある頂点をとったのは、ひとつの投稿にフラグを100個くらい持たせるこの魔改造でした。 ▼第3位、第2位の記事はこちら！ 第1位：WordPressでよくある「不動産サイト」をつくる この話がバックエンドユニットにあがってきたとき、あたり一面に魔改造の香ばしさがたちこめました。 例にならって当然、「Wo
Webサイトリリース前後におこなっている忘れがちな確認事項まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 今回はWebサイトのリリース前後に最低限おこなっている確認作業を一部ご紹介します。 LIGでは、リリース後でないと確認できないことや、案外忘れがちなものを「最低限おこなうものリスト」として管理しています。あくまで忘れがちなものたちの確認のため、クロスブラウザテストや機能テストといったスケジュール内に組み込まれるものは対象外になっています。 リリース前の確認作業 リリース前には、以下のことを実施しています。 最低限おこなうものリスト（リリース前） faviconは正しく表示されているか metaタグは記述されているか（title,description） ogpタグは記述されているか（type,title,description,url,site_name,image） headタグ内に不要なタグが出力されていないか canonicalの設定は
マーケターが「よくやっているけど意味のない業務」と「成果を出すためにやるべきこと」って？WACUL垣内氏インタビュー | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
マーケターがよくやっているけど意味のない業務 まこりーぬ：垣内さんはよく取材記事やTwitterにて「○○（マーケティング施策）には意味がない！」とズバリ断言されていらっしゃいますが、本日はあらためて、意味ない度合いの高い施策から順に教えていただけないでしょうか……！ 垣内：成果には影響がないし、やっていてつまらない施策には意味がないですよね。しいて序列をつけるとすれば、よく実施されがちな「ABテスト」「アトリビューション」あたりが最悪で、時間はかかるし一番やってはいけないです。 まこりーぬ：（出ました垣内節……！）しょ、詳細を聞かせてください……！ 代表例1：ABテスト まこりーぬ：ABテストについては前回の取材でもお話しいただきましたね。「細かなABテストで成果が劇的に変わることはない」という言葉は当時とても印象に残りました……。 垣内：ヒートマップを一度でも使ったことがあれば、ページ
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 こんにちは、ハルです。推してるアイドルが新曲を出してイベントをするたびにCDを買うので、どんどんCDが増えています。 Google Chromeの拡張機能を作ったので、「こんなの作ってみたよ！ よかったら使ってね！」という記事を書きたいと思います！ アドベントカレンダーでの記事ということもあり、「ワイからの皆さんへのプレゼントやでっ！」というよくわからない意気込みで作りました（ただ拡張機能を何か作りたかっただけ）。 LIGアドベントカレンダー2019は こちら！ どんなものを作ったか TDK Meta Checker TDK Meta Checkerという拡張機能をつくりました！ 閲覧中のheadタグ内のtitleタグやmetaタグのdescriptio
グッドデザインな2020年度新卒採用サイトまとめ9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまべです。 すっかり季節は秋めいてきましたが、秋は採用市場が活発になる季節です。そこで昨今気になった採用サイトをいくつかご紹介したいと思います。 S-GROOVE https://www.s-groove.co.jp/freshers/ カラフルな配色の中に質の高い社員さんのポートレイト写真が特徴的なこちらのサイト。いろんなギャラリーサイトや雑誌にも載っているので知っている方も多いと思います。 大きめに配置されたタイポグラフィとメニュー、ボタンでユーザビリティを担保し、支給の写真とも思われる写真もデュオトーンに加工して全体のトンマナを整えています。淡い配色ながら大人っぽく、センスの良い会社というイメージを醸成させるデザインに仕上げています。 つばめタクシー大和グループ https://tsubametaxi-yamato.com/ 鳥に擬態した青い人の写真のビジュア
ブランディングの具体的な進め方を実例とともに解説【実例あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのゆうこです。 ブランディングはマーケティングの戦略としてかなりメジャーですが、言葉の示す幅が広くて、何からはじめたらいいのか、どこまでやればいいのか、そもそも定義すらあいまいな人も多いかもしれません。 今回は、ブランディングの役割とその方法、そして私たちLIGがデザイン面でやっていることを、事例と合わせてご紹介したいと思います。 💡弊社クリエイターにアンケートをとった、おすすめブランディング会社7選はこちら 要件定義 これから事例としてご紹介するゲンナイ製薬さまは、妊活を応援する時期別葉酸サプリメント「プレミン®︎」を主軸に取り扱っている会社です。サプリメント事業だけでなく、化粧品、医薬部外品の企画・製造販売も行っています。そんなゲンナイ製薬さまの新プロダクト「IZUMONO（いずもの）」製品開発のご依頼をいただきました。 「IZUMONO」は縁結びで有名な出雲に
文字デザインの基本装飾10パターンを紹介【参考例あり】
こんにちは、デザイナーの花ちゃんです！ 自社デザインチームで働いています。 LIGに入社してから作成したLIGブログのアイキャッチは300枚を超えました！ 私がアイキャッチを作成する上で最初の難関だったもの…… それは……文字の装飾！！ 前職ではスマホゲームのUI/UXを担当していました。ゲーム内イベントのキービジュアルやバナーを作成する際は、世界観にあったフォントがある程度決まっていたので、その中から合ったものを選択していたのですが……ブログのアイキャッチとなると、毎回記事の内容、書き手のキャラクターによってテイストや組み合わせを変えなくてはなりません。 圧倒的に引き出しが足りない……！ ということで、今回は文字装飾の基本のパターンについて、LIGブログのアイキャッチを参考例に挙げながらまとめてみることにしました！ 現場で活かせるWebデザインを勉強するなら…… Webデザインを徹底的に
コーポレートサイトとは？その役割と必要なコンテンツ一覧 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コーポレートサイトとは、自社の紹介を目的としたWebサイトのことをいいます。 営業や広報に代わって自社の紹介をしてくれる重要な役割を担っていますが、目的が曖昧なまま制作してもその効果を十分に得ることはできません……。はより高い効果を得るためにはどのような工夫が必要なのでしょうか？ 今回はコーポレートサイトとはどんなものなのか、その役割や目的、さらにはコーポレートサイトを作成する上で必ず知っておくべきポイントを紹介します！ 株式会社LIGって？ 2007年設立、東京都台東区発のWeb制作会社。年間150のWeb制作・サイトリニューアル実績をもち、毎年複数のWebデザインアワードを受賞している。月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作の詳細・実績 ※編集部注：2024年1月に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Three Fiberでシンプルなパーティクルアニメーションを実装してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
