【2022】注目のWebデザイントレンド13選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おつかれさまです。デザイナーのみやです。 Webデザインのトレンドは2〜3年ごとぐらいの大きな潮流がありつつ、既存のトレンドに一工夫加えたものが流行ったりと、メジャー／マイナー問わず刻々と変化していっています。新しい時代への対応だったり、世代の移り変わりによる好みの変化などにも影響されながら変わっていくので、クリエイターとして常に追いかけていく必要があります。 2022年に入って結構経ってしまいましたが、今後直近で流行りそうなデザインを参考とともにピックアップしました。 ※最新2023年版のWebデザイントレンドは以下記事をご覧ください！ 👉注目のWebデザイントレンド10選【2023】 ※今回こちらの記事を参考にしています 22 inspiring web design trends for 2022 10 Web Design Trends To Expect in 2022 Top
【Photoshopの小技】切り抜きの精度をグッと上げる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさん、Photoshopで毎日切り抜いてますか？ 今回はPhotoshopの切り抜き精度を上げる小技をお伝えします。 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 切り抜く方法はたくさんある 画像を切り抜くためには切り抜く部分の選択範囲をとる必要があります。画像加工のすべては選択範囲から始まると言っても過言ではありません。 選択範囲を取る方法はたくさんあります。 ・クイック選択ツール ・オブジェクト選択ツール ・ペンツール ・被写体を選択を使う ・マスク機能 などなど、作業時間や目指す精度
引き出しを増やしてスピードアップ！デザイントレースのやり方【初心者向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 新人デザイナーのぱんちゃんです。 入社して早5ヶ月、主にLIGブログのアイキャッチ制作を担当していますが、スピードもクオリティももっともっと上げていかねばならない今日この頃。 デザインがうまくなりたい……！！ もっとスピードをあげたい……！！！ そう思い、新年からデザイントレースをはじめてみました。 今回はデザインの勉強を始めたての方、私と同じく新人デザイナーの方に向けて、私がやっているトレースの方法と、実際やってみての気づきをお伝えできればと思います。あくまで一つのやり方として、参考にしていただけたら嬉しいです。 そもそもトレースってなに？ トレースとは「参考にしたいデザインをなぞって真似する」作業のことです。 とくにデザイン初学者の方にとってはトレースをするなかで細かい配色や、余白の取り方や文字の大きさなど、勉強になることがたくさんあります。デザインの引き出しが増え、いい
【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまいまいです🦀 みなさん、駆け出しのWebデザイナーのころってどんなことを学びましたか？ デザインツールの使い方、フォント、レイアウト、配色、コーディング、etc……。 いろんなことを学びますよね。今回は、「めちゃくちゃ大事なのに言葉でサラッと説明するのが難しい」「はじめからきちんと理解しておけば……」と私が感じた画面サイズについて書きます！ 独学でつまずいていませんか？ Webデザインの基本を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 カンバスサイズ PhotoshopもしくはXDやFigmaでデザインをつくると
PhotoshopとAdobe XDどっちが良い？メリデメを比較
こんにちは、まいまいです🦀 みなさんはデザインするとき、PhotoshopとAdobe XD（以下：XD）、どちらを使いますか？ 私は熱狂的なPhotoshop信者で、これまでPhotoshopを使い続けてきたのですが、リモートワークや、エンジニアからのリクエスト、案件の都合などで真剣にXDと向き合い始めております。 もちろんデザイナーになってからこれまで、多少はXDに触ったことはあったのですが、小数点がでてしまったり、色味が実際の見え感と違うなどの理由から使用を避けておりました……。 私と同じようにPhotoshop一択で仕事をされているデザイナーの方、いらっしゃるのではないでしょうか？ ですが、真剣にXDについて勉強してみたところ、Photoshopに負けない素敵な機能をたくさん見つけることができました！ 今回はPhotoshopとXDのリアルな使用感や機能を比較してみたので、「どち
作字テクニックのひとつ「文字を溶かす」を徹底解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインしてて文字をばちっと決めたいときってありませんか メインビジュアルや見出しなどで、「文字（コピー）をばちっと決めたいッ！」ってときありますよね。そのときに普通の書体をそのまま置くと、 どうしてもデフォルト書体そのまま感が出ちゃうときってありませんか？ もちろん出ちゃわないときもあります。でも出ちゃうときもありませんか？ うん、ですよね。 そんなときの解決策の一つ、「作字」 “デフォルト書体そのまま感”をなくす方法はいくつかありますが、その一つとして「作字」があります。デフォルトの書体を少し調整して文字に特徴をつけることですね。 文字を”ちょっとロゴっぽくする”するという言い方が近いでしょうか（わかりにくいか……）。 作字するといい意味で”違和感”がでて、印象的なビジュアルになります。その作字のひとつに「文字を溶かす」という小ワザがあります。 文字を溶かすって？ Afterの文字を拡
3つの要素の掛け合わせでコンテンツは無限大！エディターが押さえておきたい企画の思考法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。メディア事業部でクライアントのオウンドメディア運用支援に携わっている、外部メディアコンテンツ制作チームのカナメです。 最近、遅ればせながらAmazonのスマートスピーカー「Eco Dot」を購入しました。日々の生活をスマートにすべく、AIアシスタントである「Alexa（アレクサ）」を学習させるために色々と話しかけているのですが、一向に賢くなってくれる気配がありません。たまに無視されることもあり、寂しい気分になってしまいます。 と、話が逸れてしまいましたが、オウンドメディアの運営に携わっている皆さんは、企画のマンネリ化の悩みに消耗した結果、AIアシスタントがイケてる企画を日々量産してくれたら………なんて妄想した経験はないですか？ 残念ながら、現時点ではそんな素敵なAIアシスタントは開発されていません。ですが今回、エディターとして培ってきた知見を集約し、記事コンテンツ企画で迷った際
【最新】4大SNSのユーザーについて学ぼう ― 目的・ターゲット別で効果的なPR戦略を！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エディターのあっきーです。この記事にたどりついたということは、「SNSって色々あるけど、それぞれどんなユーザーが利用してるの？」「男女比は？ 年齢層は？」などのお悩みを持っているのではないかと予測しています。 ダイレクトレスポンスマーケティングの世界的第一人者であるダン・ケネディ曰く、マーケティングで成功するためには「マーケット」、「メッセージ」、「メディア」の3Mを適切に選択することが必須です。 この記事ではそのなかの「メディア」についてフォーカスし、「4大SNSのユーザーの特徴、属性」がひと目でわかるようにまとめました。あわせて、広報戦略を考えるにあたって、どのような場面でどのSNSを利用すれば効果が見込めるかもご紹介します。 この記事はこんな人に役立ちます！ ・企業・店舗用のSNSアカウントを初めて作成する人 ・4大SNSのユーザー数、ユーザー属性について詳しく知りたい人
知らないと大損！？今日からライティングに活かせる心理学6選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのエディターのヒロです。 日頃から、書いても書いても、成果（コンバージョン）につながらない！ とお悩みのエディター・ライターの皆さま。 安心してください。僕もそのひとりです。 では、どうすればコンバージョンまでつなげることができるのか。そのひとつの打開策として、僕が目をつけたのが心理学です。 SEOも完璧！ 企画も申し分ない！！ 文章もおもしろい！！！ にも関わらず、成果をあげられないそこのあなた。 もしかしたら、足りないのは心理学かもしれませんよ。 コピーライティングに心理学が有用な理由 そもそもコピーライティングとは、 「人間心理を深く理解して、言葉で読者を行動に駆り立てる広告の文章、またはその技術」のことです。 つまり、コピーを書くうえでは、人間心理を深く理解することが必要不可欠となります。ではどうやって人間の心理を理解するか。 その一助となるのが、心理学です。 心
【最新】目的別おすすめカラーパレット13選！選び方のコツも紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ WebクリエイタースクールデジタルハリウッドSTUDIO by LIGの運営担当の天（@10TEN10TAN10）です！ 未経験からデザインを学ぶ中で受講生さんから時折いただくのが「おしゃれな配色ってなんですか？」ということ。 デザインのトレンドは日々変化していきますし、人それぞれ「おしゃれ」の定義って異なりますよね。今日の記事では『配色』を知るためのおすすめツールを紹介をします！ デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料の
Webサイトリリース前に確認すべきSEO内部施策10項目をご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作事業部WebディレクターのZIMAです。 みなさん、SEO内部施策やってますか？ やっていないわけないですよね。しかし「どこまでやってますか」と聞かれると……困っちゃう人多いのではないでしょうか。 実は自分もどこまでやればいいんだろう？ と思って、我らがづやさんに聞いてみたところ「ふむふむ、それなら、 ちょうどいいの作ってるから、勉強がてらZIMAがつくってみてよ」と、ひょんな流れから私がLIGのSEO内部施策チェックリストを作成することになりました。 せっかくなのでブログにして自分の学びをみなさまに共有したいと思います！ そもそもSEO内部施策ってなんだ？ Webサイトの中身をGoogleなどの検索エンジンに正しく伝えたり、ユーザーがストレスなく利用できるようユーザビリティを向上させるための施策のことです。 世界中のWebサイトをクローリングしているのは簡単に言えばロボッ
【徹底解説】SEO1位を取るキーワード選定方法！無料おすすめツールも紹介
LIGブログ編集部です。SEO記事を書くためのはじめのステップとして必要な「キーワード選定」。なんとな～く選んでいたりしませんか？ 言い回しひとつやキーワードの組み合わせでまったく検索結果が違ってきたりと、このキーワード選定は、コンテンツSEOの要といっても過言ではありません！ 思うような結果が出ないという方も、もしかしたらキーワード選定の方法から間違っているのかも？ この記事では、キーワード選定の具体的な手順や、おすすめのツールの使い方をご紹介いたします。キーワード選定の肝要を理解し、実際にツールを使ってキーワード選定、整理、優先順位をつけられるようになりましょう！ 【重要】キーワード選定の事前準備 キーワード選定の具体的な手順に入るその前に。知っておいてほしい前提知識や事前準備についてご紹介します。 確実に上位を獲得するために 前提として、確実に上位を獲得するためには、1つのキーワード
LIG制作「fondesk」LPのCSS・JSアニメーションを解説します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こちらのクライアントインタビューで、コーディングが綺麗とお褒めの言葉をいただき、とても嬉しかったので、今回LPのコーディング・アニメーションの解説をしようと思います！ ぜひ実際のサイトを開きながらご覧ください！ CSS構成 今回は、このようなフォルダ構成にしました。 基本的なディレクトリ構造、命名規則はECSSに則っていますが、一部自分が使いやすいようにしている部分もありますので、参考までに！ いつもCSS設計は悩みますね……。 MVスライドショー MVは、上記のようにキャッチコピーと写真が並んだものをスライドショーで表現しました。 スライドショーは、細かいところまで配慮されているプラグイン（swiper/slick）を使うことが多いです。今回はプラグインを使うと動きの再現が難しくなりそうだったので、1からJavaScript・CSSを使って作りました。 実装方法は、 基本 スライドで変更
CSSだけでアニメーション実装 〜カード型リンクHover編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずはこちらのカード型リンクのHoverアニメーションを作っていきます。 Hoverしたときに、 ピンク背景のブロックを上から重ねる 「READ MORE」というテキストをFadeInする 以上の2つの動きを実装しています。 ピンク背景のブロックを上から重ねる ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。 カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。 「READ MORE」というテキストをFadeInする READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。 カード型リンク～左から右へ～ 次にカード型リンクのHoverアニメーシ
フリー画像・写真素材サイト15選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ アイキャッチやバナー、プレゼン資料などにも欠かせない写真素材、みなさんはどうしていますか？ もちろんできることならぜんぶ自分で用意するのに越したことはないのですが、実際に撮影用のセットを組んだり現地に行って撮影したりするのは、時間や予算の関係でなかなか難しいときもありますよね。 そんなとき、役に立つのがロイヤリティフリーの写真素材です。私は素材を組み合わせたり、合成をしたりしてフル活用しています！ でも、イメージに合う素材を見つけるのってなかなか大変で、探し始めたらあっという間に1、2時間過ぎてしまうことも……。なんとか作業時間を短縮できないか……と思い、無料で使えて、商用利用もできる素材サイトと効率的な写真の探し方をまとめてみました！ 未経験からWebデザイナーを目指すなら…… Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教え
多店舗のローカルSEOを推進するならGoogle Maps順位計測ツール「MEOチェキ」に頼ろう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさまこんにちは、LIGのマーケター・まこりーぬ（@makosaito214）です。 大変です。いま、コワーキングスペース「いいオフィス」の店舗数が爆増しています。 どれぐらい爆発的かというと、2019年1月時点では5店舗しかなかったのに、2020年1月時点では22店舗にまで増えました。オープン予定も合わせると店舗数は1年で5倍以上……！ すごい！！！ 店舗ビジネスなのでローカルSEO（MEO）にもしっかり取り組んでいきたいところなんですが、正直、最低限Googleマイビジネスには登録してあるものの、その後の運用がほったらかしな店舗もちらほら…… ▼把握すべきだができていないこと Googleマップ上でなんと検索されているのか 狙いたいキーワードで何番目に表示されているのか 上位に表示されている競合他社と比べて何が足りていないのか ああ……全店舗分なんてまったく把握できていない……把握で
マーケターが「よくやっているけど意味のない業務」と「成果を出すためにやるべきこと」って？WACUL垣内氏インタビュー | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
マーケターがよくやっているけど意味のない業務 まこりーぬ：垣内さんはよく取材記事やTwitterにて「○○（マーケティング施策）には意味がない！」とズバリ断言されていらっしゃいますが、本日はあらためて、意味ない度合いの高い施策から順に教えていただけないでしょうか……！ 垣内：成果には影響がないし、やっていてつまらない施策には意味がないですよね。しいて序列をつけるとすれば、よく実施されがちな「ABテスト」「アトリビューション」あたりが最悪で、時間はかかるし一番やってはいけないです。 まこりーぬ：（出ました垣内節……！）しょ、詳細を聞かせてください……！ 代表例1：ABテスト まこりーぬ：ABテストについては前回の取材でもお話しいただきましたね。「細かなABテストで成果が劇的に変わることはない」という言葉は当時とても印象に残りました……。 垣内：ヒートマップを一度でも使ったことがあれば、ページ
Web制作のクライアントにヒアリングしたい項目と意識すべき重要なこと | Page 2 of 3 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ビジネスモデルを把握せよ Webサイトを作ることだけに焦点に置いたヒアリングでは、お客様のビジネスを成功に導くための情報としては少なすぎます。ビジネスモデルはお客様によって違ってきますが、売上と原価とランニングコストについてはどのビジネスでも共通しています。 ヒアリングの例 お客様の要望：「コーポレートサイトをリニューアルしたい」 お客様の業種：ソフトウェアのメーカー お客様の悩み：サイトのデザインや情報が古い、競合サイトと比べても見づらい ターゲット：中小企業の管理部門の決裁者 ゴール：イメージを刷新し競合ではなく当社の商品を選んでくれるようになること 1. Webサイトの制作だけに焦点を置いたヒアリングの場合 「御社独自の強みはなんですか？」 「ターゲットが御社の商品に決定する一番の理由はなんですか？」 「御社の理念はなんですか？」 「サイトのPVやお問い合わせの目標はありますか？」
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
