簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
画像を遅延読み込みしてみよう！Intersection Observer編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
年齢なんか関係ない！ 人生史上今が一番！ Webのパフォーマンスもブチ上げていきたい、フロントエンドエンジニアのザワです。 lazyload（レイジーロード）、Web業界では耳慣れたワードになってきたのではないでしょうか。 Webページの表示を高速化するために、ページロード初期時には画像は読み込まず、表示したいタイミングでロードを開始するアレです。「lazyload」だの「遅延読み込み」だのいってますが同じことを指しています。気分と話し相手によって変えていきましょう。 今回は2つの方法を2回に分けて実践していきます。 Intersection observerを使用する方法 loading属性にlazyを適用する方法 Intersection observerが一般的になる以前は、scrollイベントで随時要素の位置を取得して、みたいなことをやっていたと思いますが、そんなオールドスクールな
ランディングページのデザインまとめサイト11選！デザインを作る際のポイントとは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マーケターのまこりーぬです。 Webサイトのランディングページを作成することになったけど、どのようなデザインにしたらよいのかさっぱりわからん……と悩んでいる方も多いのではないでしょうか？ この記事では、Web制作担当者向けに、ランディングページとはなにか、デザイン作る際の注意点やおすすめのデザインのまとめサイトを紹介します！ ランディングページとは ランディングページ（LP）とは、ユーザーが広告・外部サイトなどをクリックした際に、一番最初に訪れるページのことです。一般的には縦長の1枚構成になっています。 ランディングページの役割 ランディングページの役割は、ユーザーに、自社の商品やサービスへの関心を持たせ、商品購入や問い合わせといったコンバージョン（結果）を引き出すことです。ユーザーを他のページに移動させないために、1ページ中に情報を集約する、イメージ画像を多用する、情報を提示
Webサイト制作の流れと進め方のポイントを3ステップで解説！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGでアカウントプランナーをしています、なおです。 これから制作会社にWebサイト制作を依頼したいけど、どんな流れで進むのかがイマイチ想像がつかない、という方も多いのではないでしょうか？ この記事では、Webサイト制作の流れやプロジェクトをスムーズに進めるためのポイントについて解説します！ ▼この記事を読んでわかること Web制作がどんなフローで進むのか プロジェクト成功のために各工程で注意すべきこと サイト公開後はどんなことが必要になってくるのか Web制作を成功させるために事前に準備しておきたい情報 Web制作を依頼するその前に！ 準備しておくと後の制作がスムーズに進む事前情報についてご紹介します。 Webサイトの目的とターゲットを定める Webサイトを作ることでなにを実現したいのか、またどんなターゲットに見てほしいのかを事前に定めておきましょう。 目的やターゲット設定だ
【2024】広島県でおすすめのWeb制作会社12社をプロが厳選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIG デザイン部 部長の吉田です。 広島のWeb制作会社に勤めていたデザイナーが厳選した、クリエイティブで地域を支える、広島県のイケてるWeb制作会社をまとめてみました。 💡【全国】従業員100名以上の大手Web制作会社はこちらから 広島県のイケてるWeb制作会社12選 株式会社LIG https://liginc.co.jp/ 弊社LIGは2007年の創業以来、大企業から個人商店まで、さまざまなWebサイト制作を手掛けてきました。 年間150サイトリリース＋毎年複数の国際的なデザインアワードを受賞する実績をもとに、貴社の課題をクリエイティブで解決します。 本社は東京にありますが、広島にも支社がありますのでオンライン、対面どちらもご対応が可能です。 Web制作、システム開発、メディアコンサルティングまで、お客様の課題に合わせてのご対応を1社で完結することが可能です。
Webサイトに動画を埋め込む際のサイズと軽量化方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します！ 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×
リターゲティング広告を始めるべき理由と7つの活用法
こんにちは。ソウルドアウトの池亀です。 前回の「リスティング広告をする意味とは？運用のメリット・デメリットと初心者のための基礎知識」で「リスティング広告とは何か」を書かせていただきましたので、今回はその次のステップ「リターゲティング広告」についてです。 リスティング広告は、もちろんそれ単体でも効果を得ることはできますが、さらに「リターゲティング」という広告手法を併用することで、より大きな効果が期待できます。 そこで今回はリターゲティング広告とはなんなのか？どのように使うと効果的なのか？をご紹介します。なお、ここではリスティング広告からの流れで、Yahoo!とGoogleでのリターゲティング広告に絞ってお話ししたいと思います。 端的にいうと、1度はサイトを訪問してくれたユーザに対して広告を出すことで、Yahoo!やGoogleでも実施可能です。そのユーザがYahoo!やGoogle、あるいは
Illustratorを使ったロゴ作成テクニック！クオリティアップの一手間を解説
こんにちは、Webデザイナーのゆうこです。ふだんの業務でロゴ制作を担当させていただくことがよくあります。 ロゴ制作って楽しいですよね。自分が作ったロゴが会社やお店で使われているのを見ると、嬉しくてわくわくします。 今回はロゴ制作の過程と、デザイナー初心者の方でもすぐに使える、Illustratorでのロゴデザインの小ワザをいくつかご紹介したいと思います。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と、手厚すぎる就職支援が特徴！ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料のご請求はこちら！ 💡ロゴ制作会社お
インスピレーションを刺激するモーショングラフィックスの世界へようこそ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おつかれさまです。デザイナーのみやです。 かっこいいアニメーションって何度でも見たくなりますよね。Webサイトでもアニメーション含めてデザインがカチッとハマるとすごく気持ち良いです。 そんなアニメーションを考える上で、インスピレーションを得られるモーショングラフィックスがいっぱいあります。 いくつか見つけてきたのでまとめました。 モーショングラフィックスまとめ https://dribbble.com/shots/3479327-Letter-Animation マンガ的なコミカルな動きが見ていて楽しいです。 衝撃とか慣性とかを細かくつけてあげるとイキイキとした動きになる例ですね。 https://dribbble.com/shots/4895350-Moon-Animated-Logo 文字が重なったときに色が反転してるのとか、月とか星の軌道が細かく表現されています。 柔らかに広がってい
チャットツール「Slack」で使える、おすすめの機能を紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 みなさんは社内でのコミュニケーションツールで何を使っていますか？ 最近はチャットツールの「Slack」を活用している企業も多いのではないでしょうか。 そこで今回はLIGでも活用している「Slack」で使える、個人的に気に入っている機能についてご紹介します。 Slackとは 「ChatWork」や「Facebook Messenger」といったチャットツールの仲間です。 2014年にアメリカで生まれたサービスで、2017年11月には日本語対応もはじまりました。そのため、最近では日本企業で導入するハードルもかなり下がってきています。 ちなみにLIGでは、SlackとChatWorkの二つを併用しています。全社的にはChatWorkを使っており、チームや職種によってSlackで会話したり……と使い分けています。 公式サイト：https://slac
ロゴデザイナーではない僕がロゴを制作するにあたって気をつけたこと〜「Whisky STAND」ロゴ完成への道のり〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
もともとロゴが得意なわけではなく、コンペがあると知っていたらなにかと理由をつけて入社を遅らせることも視野に入れるレベルには苦手意識がありました。Webデザイナーとしてキャリアがある方でも、ロゴに苦手意識がある方は多いのではないでしょうか？ 今回はロゴデザイナーではない僕がロゴを制作するにあたって気をつけたことや、完成までの流れを紹介したいと思います。駆け出しのデザイナーの方やロゴ作成の経験があまりない方に、少しでも参考になればと思います。 コンセプト作成 いきなり作りはじめてはダメです。ハマります。 Webデザインも同じですが、手を動かす前の準備段階がすごく大事だと思います。本来はヒアリングからはじめると思いますが、今回は社内コンペのため、詳細な指示書がありました。ただこれはあくまで依頼側の指示書なので、これをデザインに昇華するために指示書の内容をもとにデザインコンセプトを作成していきます
Webデザインで文字組みを考えるときに押さえたい5つのポイント | 東京上野のWeb制作会社LIG
おつかれさまです。デザイナーのみやです。 文字組みって大変ですよね。。 特に日本語は漢字・ひらがな・カタカナ・英字・数字・記号が組み合わさる非常にややこしい言語なので、テキストをそのまま打ち込んだだけではバランスが悪く、見た目が美しくありません。 狭いところもあれば広いところもあります。 こんなとき、どんな工夫をすればよいのでしょうか？ Webデザインにおける文字組み そもそもWebで文字組みって必要なの？ と思う方もいるかもですが、SVGなどの技術の発達によって画像文字を使用する場面もかなり増えてきました。 ブランディングにおいてもコピーライティングが占める役割は大きいため、フォント選びや文字のバランスは重要です。 たとえば漢字だけを組み合わせてできた熟語の場合は、文字自体の持っている幅が一定のためカーニングは必要ない場合が多いです。しかし、そんな熟語だけで構成するシチュエーションもほぼ
ノンデザインで簡単！CSSフレームワーク「Bulma」でいろんなUIを実装してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもだよ！ はやちだよ！ (`⊙ω⊙´)ｶｯ!! 今日はノンデザインでもパーツを組み合わせてコーディングができちゃうBulmaをご紹介いたします！ 導入方法 まずはnpm経由でBulmaをインストール。 npm install bulma-start 使いたい部分をimportします。 @import "../../node_modules/bulma/sass/utilities/_all.sass"; @import "../../node_modules/bulma/sass/base/_all.sass"; @import "../../node_modules/bulma/sass/elements/_all.sass"; @import "../../node_modules/bulma/sass/grid/_all.sass"; @import "../../node_mo
「グラデーションのゴーストボタン」をつくるときに最適なスタイルの当て方を考えてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちですよ✌(´ʘ‿ʘ｀)✌ 今回は「縁がグラデーションになっているゴーストボタン」を作りたいときに最適なスタイルの当て方を検証してみました。 3つの方法を試したので、さっそくご紹介したいと思います( ˘ω˘)☞三☞ｼｭｯｼｭｯ 基本のマークアップ 基本のマークアップはこちらです( ˘ω˘)☞三☞ｼｭｯｼｭｯ <div class='btn-wrap'> <p>NORMAL</p> <a href='#' class="btn1 btn-1"> <span class="text">BUTTON1</span> <span class="bg"></span> </a> </div> 背景を二重に重ねる方法 最初はこちら。btnの背景をグラデーションに設定、さらにその中のspanにbodyの背景を設定して、あたかも線のグラデーションが引かれているデザインにみせる方法です。 .bt
Webディレクターが考える「テスト」の大事さについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。Webディレクターのともぞうです。 今回はテストについて書いていきます。 前提のお話 テストといっても、エンジニアリングなテストの話ではありません。わたしはWebディレクターなのでコードをちゃんと書けないからです！ ユニットテストや単体テストとかの話はきっと別の誰かがしてくれるはずです。後述になりますが、Webディレクターが書ける機能テストについて書いていきます。 テストの種類 Webディレクターができる・書けるテストは大きく3つに分類できると考えています。 デザイン再現テスト ブラウザ表示テスト 機能テスト それぞれどんな内容かというと…… デザイン再現テスト デザインPSDの再現度をテストする作業です。PSDとブラウザを重ねてズレがないか？ というテスト。全端末、全ブラウザに対しておこなうことは非現実的なので、ベストビューというものを定義して、限定したテストをおこないます。
アイコン使いや図版が参考になるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 突然ですが、アイコンや図版のデザインに苦労したことってありませんか？ 僕はけっこう毎回苦労するので今回のブログで「アイコン使いや図版が上手いな」と思うサイトを集めてみました。 TAKAO 599 MUSEUM https://www.takao599museum.jp/ GIFアニでアイコンを動かしているのがとても可愛いですね！ 下層ページで使用しているアイコンも動かしてたり図版を丁寧に作っていたりと、しっかりとデザインにコストをかけている好印象なサイトです。ラインアイコンの線を太くすると親しみやすい印象になりますね。 Web design tools for designers and developers | Webflow https://webflow.com/designer 透明感のある色使いのアイコンは今後新たなトレンドとなりそうですね。サイ
Emmetってどれくらい活用してる? 略して楽するハッピーコーディング！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさん、お元気ですか？ 作業用BGMはどこかの島の雨音、フロントエンドエンジニアのザワです。 今回は、日頃より爆速コーディングを目指している小生が「Emmetを使った場合」と「使わない場合」でどのくらい時間短縮できるのか、興味本意で試してみた結果をご紹介します。 Emmetとは HTML、CSSをコーディングするときに、ショートカットキーを使用すると補完してくれるツールです。プロ、いわゆるロープーのコーダーであれば、使用しているという方がほとんどではないでしょうか。 ※今回の記事では、機能の詳細や導入・使用方法はスキップして検証に移りたいと思います。 検証前提 今回はwebサイトでよく見られるカードモジュールをコーディングしてみました。 HTML、CSSのコードはこちらになります。 <article class="card"> <a href="#" class="card__inner
互い違いレイアウトの組み方〜リキッドレイアウト編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
前回の状態から少し制約を加えて、「写真は画面幅いっぱいに広げるパターン」の組み方をご紹介します。 最低の幅を決め、一定以上縮小したときはレイアウトが崩れないようにし、広がったときは際限なく写真が横に広がり続けるようにしてみます。これは、案件でもよくあるパターンです。 要件 PC表示 ブラウザ幅が769px以上だったらPCレイアウト表示 互い違い 最低の幅は1280px ←追加要件 写真は、テキストボックスが少し被る余白を残して画面幅一杯に広げる ←追加要件 SP表示 ブラウザ幅が769px未満だったらSPレイアウト表示 均一に縦並び 前回のスタイルを変更 .container { @media all and (min-width: 769px) { width: 800px; } } を .container { @media all and (min-width: 769px) { m
Adobe XDなしにはもう生きられない！これからのWebデザイナーのワークフローが変わるかも!? | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです！ そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか？ 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用
HTMLでスライドを作成してLTしてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 今回はディレクターならよく作成するスライドについてお話しします。スライドといってもPowerPointやKeynoteでつくるのではなくHTMLでつくります！ それでは、HTMLでスライド作成し、スライドをGitHub Pagesというサービス上に公開するまでの方法をご紹介したいと思います。 今回のゴール 先に今回のように私が作成したスライドを以下から確認してみてください。 https://lig-komatsu.github.io/statistics_01/#/ お作法さえ押さえれば簡単にスライドを作成することが可能です。 用意するもの 好きなエディター ライブラリ取得 GitHubアカウント とりあえずスライドだけつくりたい！ という方はGitHubアカウントを取得する必要はありません。 Gitを使ったことがなくてもスライドは作成できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
