タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
世の中に溢れる「うざい広告」をプロが徹底解説！マーケターは必見です | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは、LIGのマーケターのまこりーぬ（@makosaito214）です。 ネットサーフィンをしていると頻繁に出会う「うざい広告」ってありますよね。広告を制作、運用する立場としてこの手の広告がなぜ存在するのか、そして今後こういった広告はどうなっていくのかを、今回はしっかり勉強したいと思います。 今回講師としてお招きしたのは、マーケティング会社の「株式会社キーワードマーケティング」の代表である、滝井さんです。以前よりTwitterやブログを読ませていただき勉強していたので、今回は非常に楽しみです。それではご覧ください。 滝井 こんにちは。株式会社キーワードマーケティングの滝井です。本日は、まこりーぬさんに「うざい広告」についていろいろと説明したいと思います。「うざい」と思う広告を勉強することで、ユーザーに訴求する最適な広告とは何か？ を考えることにつながると思いますよ。 まこりー
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
※本記事は2019年1月に公開された内容です。 コードレビューとは、誰かが作成したソースコードを他者がレビューすることで、問題のある記法やバグがないかを確認する作業のこと。プログラムの品質を高めるために、なくてはならない工程のひとつです。 しかし、コードレビューを成功させることは簡単ではありません。読者のなかにも、「同じような指摘を何度もしているのに、メンバーのスキルが向上しない」「つい感情的なコメントをしてしまう」といった悩みを抱えている方は多いのではないでしょうか。 やみくもにコードレビューを実施しては、成功率は上がりません。レビューアーが実施方法やマインドを適切なものに変えなければ、良いコードレビューにはならないのです。 ここでは、コードレビューを成功させるための方法を7つご紹介します。 本記事の監修：高遠和也（株式会社LIG CTO） コードレビューを含む求人の検索はこちら コード
簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
こんにちは、デザイナーの花ちゃんです！ 最近イラストのご依頼をいただくことが増えています。描くのは楽しい反面、時間がかかってしまうこともしばしば……。 そんなときの時短テクニックとしておすすめしたいのが、「ロイヤリティフリーのイラスト素材」です。自分のイラストと組み合わせることもできますし、構図や配色の参考としても役立ちます。 この記事では、無料で使えて、商用利用もできるフリーイラスト素材サイトをカテゴリーやテイスト別にまとめています。イラストは作者によって絵柄や表現の仕方に個性が出やすく、イメージに合ったものを見つけるのが難しいですよね。日頃からさまざまなテイストのイラストをストックして、引き出しを増やしておくことが大切です。ぜひイラストを探すときの参考にしてみてください！ イラストも作れるWebデザイナーを目指すなら…… イラストの制作のテクニックや基礎的なデザインスキルを一から学びた
転職してもう丸3年。ありがたいことに2021年3月からは本格的にチームをもつようになりました。前職でもLIGでも「リーダー」という肩書きはもともと持っていたものの、管理職としての役割はほぼなく、人生初の挑戦にドキドキしています。そんな私がいま一番克服したいこと、克服するために取り組んでいることを今日はご紹介します。 まだ見ぬ全国の同じ病をもった方に、「わかる。私も克服したい。一緒にがんばろう！」なんて思ってもらえるととっても嬉しいです。 「自分でやった方が早い」という病 私がいま一番克服したいこと、それは「自分でやった方が早い病」です。病名は小倉広さん著『自分でやった方が早い病』から拝借しています。この病気はその名前のとおり、「自分でやった方が早いわ」と、ついつい手や口を出して周りから仕事を奪ってしまう行動癖を指します。 たとえば、みなさんにこんな心当たりはありませんか？ □ メンバーが出
ヘッドレスCMSのメリットデメリット・比較おすすめ13選まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。元LIGのWebディレクターで、いまはとある事業会社で開発ディレクターをやっているともぞうです。 さっそく本題ですが、みなさんはなんのCMSを使っていますか？ WordPress、Drupal、Movable Typeあたりでしょうか？ 最近ではヘッドレスCMSというものも出てきて、CMSの選択の幅が広がりました。 今回はそのヘッドレスCMSに焦点を当て、ヘッドレスとは？ というところから、ヘッドレスCMSのメリットデメリット、各ヘッドレスCMSの比較ができる記事をお届けします。 ※この記事は株式会社ディバータの提供でお届けします。 ヘッドレスCMSとは まずヘッドレスCMSの説明からはじめます。 ヘッドレスCMSとは表示機能を持たないCMSのことを呼びます。「ヘッドレス」で調べてみると以下のような説明がでてきました。 ソフトウェアについてヘッドレスという場合は、通常は用意され
こんにちは、デザイナーの花ちゃんです！ アイキャッチやバナー、プレゼン資料などにも欠かせない写真素材、みなさんはどうしていますか？ もちろんできることならぜんぶ自分で用意するのに越したことはないのですが、実際に撮影用のセットを組んだり現地に行って撮影したりするのは、時間や予算の関係でなかなか難しいときもありますよね。 そんなとき、役に立つのがロイヤリティフリーの写真素材です。私は素材を組み合わせたり、合成をしたりしてフル活用しています！ でも、イメージに合う素材を見つけるのってなかなか大変で、探し始めたらあっという間に1、2時間過ぎてしまうことも……。なんとか作業時間を短縮できないか……と思い、無料で使えて、商用利用もできる素材サイトと効率的な写真の探し方をまとめてみました！ 未経験からWebデザイナーを目指すなら…… Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教え
ランディングページのデザインまとめサイト11選！デザインを作る際のポイントとは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マーケターのまこりーぬです。 Webサイトのランディングページを作成することになったけど、どのようなデザインにしたらよいのかさっぱりわからん……と悩んでいる方も多いのではないでしょうか？ この記事では、Web制作担当者向けに、ランディングページとはなにか、デザイン作る際の注意点やおすすめのデザインのまとめサイトを紹介します！ ランディングページとは ランディングページ（LP）とは、ユーザーが広告・外部サイトなどをクリックした際に、一番最初に訪れるページのことです。一般的には縦長の1枚構成になっています。 ランディングページの役割 ランディングページの役割は、ユーザーに、自社の商品やサービスへの関心を持たせ、商品購入や問い合わせといったコンバージョン（結果）を引き出すことです。ユーザーを他のページに移動させないために、1ページ中に情報を集約する、イメージ画像を多用する、情報を提示
早く言ってよ〜！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
リモートワーク中に3日ほど仕事をサボってキャンプをしてても、上司は気づかないのでは？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGで新卒2年目の営業をしています、イチローです。 みなさんの会社はリモートワークですか？ LIGはもう1年以上、基本的にリモートワークをしているんですが、最近思うことがあります。それは リモートワーク中にサボってても、上司はまったく気がつかないのでは？ ということです。正直、世の中のリモートワークをしている人の8割はなんらかの形で仕事をサボっているというデータ（僕の直感）があるくらいなので、みんな仕事をサボっているはずです。 今回僕は、よりダイナミックに、3日間くらいがっつりサボってみようと思います。果たして上司は僕がサボっていることに気がつくのか。この記事はそのドキュメンタリーです。どうぞご覧ください。 ルール ①2泊3日でキャンプをする（僕の趣味） ②仕事はしないが、お客様に迷惑をかけないように締め切りのある仕事などは事前にすべて済ませておく ③仕事をサボる仕事なので、
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
今後LIGが制作するWebサイトは、Internet Explorerの対応をやめます。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでフロントエンドエンジニアをしているライダーです。 IE対応、やめます。 2007年の創業以来Web制作に携わってきたLIGは、これまで長らく、Internet Explorerを動作環境に含んだWebサイトの制作を提案してまいりましたが、 今後、LIGが制作するWebサイトは、 Internet Explorerの対応を行いません！ ただしInternet Explorerに特別な配慮が必要な場合は、お申し付けください。これまでのノウハウを活かし、Internet Explorer上でも動作するよう制作させていただきます！ もちろんMicrosoft Edgeに関しては、これまで同様に対応を続けますよ！ 今日は、その背景を簡単にお話しさせてください。 IE対応によってできなくなることがある できる・できないに関しては、さまざまな考え方がありますが、ここでは予算やスケジュ
こんにちは！ エンジニアのまうみです。 突然ですが、「今使ってるブログサービスからWordPressに引っ越ししたい」と検討中の方はいらっしゃいますか。 もし、現在のブログサービスに記事をエクスポートする機能がない場合、手作業で記事を更新する必要があります。10記事程度ならまだしも、100記事以上ともなると、それは流石に手作業では骨が折れますね。 そこで今回はGoogle Apps Script（以下：GAS）で、スクレイピングしたデータをスプレッドシートに保存するプログラムを作り方をご紹介します。 【前提】スクレイピングとは スクレイピングとは、あらかじめ指定したWebサイトを巡回して情報を取得し、新たな情報を出力するためのプログラムです。 今回は、開発環境を構築することなく簡単にプログラムを実行できるGASを使用します。特に開発環境は初心者がつまづくところなので、そこをスキップできるの
これを読んでおけば間違いない！デザイナーにおすすめの本13選（グラフィック編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
印刷物のデザインをするなら色彩検定の勉強をすると良いと思います。 デザインのための色の知識はもちろん、照度、輝度、色温度など光の知識も身につきます。印刷物は閲覧する環境によっても色の見え方が変わりますので、光の知識はとても重要です。 2級レベルの知識は独学でも習得可能ですので、3級と2級を併願して受験するのをオススメします。 オススメ度：★★★★★ 組版 デザイン解体新書
まだAdobe XD使ってないの？はじめての人もこれを読めばすぐに使えるAdobe XDのトリセツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
やっとかめだなも！ LIGのWeb事業部でマネージャーをしているちゃんれみです！ 最近、周りの人からAdobe XDについて質問されることが増えてきました。すっかり「XDおばさん」の名が定着してきたようです。 Adobe XDとは Adobe XDは、Webアプリやモバイルアプリ用のユーザー操作性をデザインし、プロトタイプ化するためのベクターベースのツールです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより） ところが先日公開されたAdobe XD対談記事をシェアしたところ、意外にも「XDがんばって覚えねば……」「XDそろそろやらなきゃ」というコメントがいくつか寄せられ、まだまだAdobe XDを使ったことない方がいるんだな、と感じました。今回はそんなAdobe XDビ
マーケターが「よくやっているけど意味のない業務」と「成果を出すためにやるべきこと」って？WACUL垣内氏インタビュー | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
マーケターがよくやっているけど意味のない業務 まこりーぬ：垣内さんはよく取材記事やTwitterにて「○○（マーケティング施策）には意味がない！」とズバリ断言されていらっしゃいますが、本日はあらためて、意味ない度合いの高い施策から順に教えていただけないでしょうか……！ 垣内：成果には影響がないし、やっていてつまらない施策には意味がないですよね。しいて序列をつけるとすれば、よく実施されがちな「ABテスト」「アトリビューション」あたりが最悪で、時間はかかるし一番やってはいけないです。 まこりーぬ：（出ました垣内節……！）しょ、詳細を聞かせてください……！ 代表例1：ABテスト まこりーぬ：ABテストについては前回の取材でもお話しいただきましたね。「細かなABテストで成果が劇的に変わることはない」という言葉は当時とても印象に残りました……。 垣内：ヒートマップを一度でも使ったことがあれば、ページ
Adobe XDで簡単なアニメーションを作る方法を超丁寧に解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのしーちゃんです！ 以前初心者でも作れる！Adobe XDを使って簡単なアニメーショを作る方法の記事を書きましたが、皆さんご覧になりましたでしょうか？ 色々調べた結果、まだまだXDでできるアニメショーンがありましたので、今回もサイトのメインビジュアルにつけるアニメショーンを紹介したいと思います！ このアニメーションの特徴 イラストに動きをつけることで、おしゃれ・先進的といったイメージや、ストーリー性をサイトに持たせることができます。 サンプルのデザインから作ります。 こちらのアニメショーン作るときのポイントは、イラストをそれぞれのパーツに分けることです。分ける理由は、自動アニメショーンを付けるときに一個ずつのパーツを順番に動かすためです。 各パーツのデザインが完了したら、アートボードを選択し、コピー＆ペーストして複製。複製したアートボードを選択し、タイトルとテキストを
こんにちは、株式会社LIG Webディレクターのイナッチです。 Webディレクターといえば、サイト制作プロジェクトの提案や要件定義のフェーズにおいて「サイトマップ」を作る機会が多くあります。 とてもシンプルなフォーマットなので、誰でも作れるように思いがちですが、実は奥深く、取り組み甲斐のある作業の一つだと思っています。このシンプルな図のクオリティによって、その後のプロジェクトが円滑に進むかどうかを左右することさえあると感じています。 そこで今回は、私がサイトマップを作るときに意識していることと、サイトマップの能力を拡張するためのアレンジ技5選についてご紹介いたします。 ※ この記事でご紹介する「サイトマップ」とは、サイト全体の構造を図示した資料のことであり、XMLサイトマップ（sitemap.xml）の作り方については含んでおりません。 サイトマップの基本的な体裁 まずはサイトマップの基本
おつかれさまです。デザイナーのみやです。 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
みなさまこんにちは、Webディレクター・プランナーのむむです。 Webサイト（ホームページ）を作りたいと思ったときに、何から調べたらいいのか悩みませんか？ 決して安くない金額と時間がかかるWebサイト制作。Webサイト制作で頭を抱える人が少しでも減りますように……。そんな願いを胸に、 Web制作（ホームページ制作）に関して、これを見れば全部わかるという資料を作りました！ なんと全75ページの超大作！ もう、本ですね。当時の自分にこの資料を渡してあげたい。 資料ダウンロード また、こちらの記事ではWebサイトを制作するメリットや価格、制作期間などを解説します！ LIGにWeb制作の相談をしませんか？ 2007年創業、年間150サイト制作の実績で、毎年複数のデザインアワードを受賞しています。 訪問した瞬間貴社の魅力がグッと伝わる！そんなWebサイトを制作します 💡LIGのWeb制作実績・お問
Chromeでタブをたくさん開きがちな人に届け！作業効率を上げまくる拡張機能4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 広報室のたびちん（@takiyoro）です〜。 今回はこれがないと暮らしていけない！ とまでなったChrome拡張機能を４つ厳選してお伝えします。 ▼以前ご紹介した、タスク管理に便利な拡張機能＋アプリの使い方はこちら 開けているタブをリスト化！ 「GetTabInfo」 ダウンロードURL あらゆるオフィスワーカーに知ってほしい！ タブで出したページのURLやタイトルなどの情報がリストになって出てきます。表示方法はテンプレート化が可能です。URLだけのリスト、タイトルとURLで間にタブを入れる、タイトルを＜＞などで囲むなど、柔軟に設定できます。 こういう感じで、同じウインドウ内で開いている複数タブをリスト化できます。 「ちょっとこの業界のURL調べてリスト化しといて」なんて命が下ったときに何度か救われた拡張機能です。複数タブを開けておき、これでリストにするだけなので、個人的な
こんにちは、デザイナーの花ちゃんです！ かれこれ3年ほどLIGブログで記事を書いていますが、最近意識していることがあります。それは、文字だけではなく、できるだけ視覚的に情報を伝えるということです。最初は文章を書くことに必死でしたが、よりわかりやすく、最後まで楽しく読んでもらうにはどうしたらいいかを考えるようになり、たどり着いたのが「図解」でした……！！ 今回は、図解を作るときのポイントやグラフ作成時にやりがちな失敗例、ストックしておくと便利なチャート図のデザインパターンをまとめてみました。 【図解を作るときにおすすめの素材】 👉フリーイラスト素材サイト39選【デザイナー厳選】 👉無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 【一からWebデザインを学びたい方へ】 現場で活かせるWebデザインの基礎をしっかり学びたい、現役デザイナーに教えてもらいたい……という方は、
こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。 opacity visibility display では一つひとつ、特徴と用例をみていきましょう。 1. opacityの切り替え See the Pen 191001 by ligdsktschy (@lig-dsktschy) on CodePen. 特徴 非表示のときも、領域が確保される クリック／タップ可 transition可 用例 「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えない
デザインしてて文字をばちっと決めたいときってありませんか メインビジュアルや見出しなどで、「文字（コピー）をばちっと決めたいッ！」ってときありますよね。そのときに普通の書体をそのまま置くと、 どうしてもデフォルト書体そのまま感が出ちゃうときってありませんか？ もちろん出ちゃわないときもあります。でも出ちゃうときもありませんか？ うん、ですよね。 そんなときの解決策の一つ、「作字」 “デフォルト書体そのまま感”をなくす方法はいくつかありますが、その一つとして「作字」があります。デフォルトの書体を少し調整して文字に特徴をつけることですね。 文字を”ちょっとロゴっぽくする”するという言い方が近いでしょうか（わかりにくいか……）。 作字するといい意味で”違和感”がでて、印象的なビジュアルになります。その作字のひとつに「文字を溶かす」という小ワザがあります。 文字を溶かすって？ Afterの文字を拡
Webサイトリリース前後におこなっている忘れがちな確認事項まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 今回はWebサイトのリリース前後に最低限おこなっている確認作業を一部ご紹介します。 LIGでは、リリース後でないと確認できないことや、案外忘れがちなものを「最低限おこなうものリスト」として管理しています。あくまで忘れがちなものたちの確認のため、クロスブラウザテストや機能テストといったスケジュール内に組み込まれるものは対象外になっています。 リリース前の確認作業 リリース前には、以下のことを実施しています。 最低限おこなうものリスト（リリース前） faviconは正しく表示されているか metaタグは記述されているか（title,description） ogpタグは記述されているか（type,title,description,url,site_name,image） headタグ内に不要なタグが出力されていないか canonicalの設定は
こんにちは！ インハウスデザイナーのぱんちゃんです。 入社して一年、LIGブログのアイキャッチ画像をひたすらに作ってきました。これまでのLIGのアイキャッチは、記事の魅力が最大限伝わればトンマナはなんでもOK！ ユニーク万歳！ でしたが、CIが変わりちょっぴり大人なLIGになった今、より信頼感やプロフェッショナルさが伝わるアイキャッチに変えていこうと試行錯誤をしています。 新たなLIGらしいアイキャッチはなんだろうと考えたときに「まずは世の中にある素晴らしいアイキャッチを知ることから始めよう！」と思い、他企業・他メディアのアイキャッチの分析を始めました。 今回はクオリティの高いアイキャッチのWebメディアを37個紹介します。 アイキャッチを制作するデザイナーの方、メディアサイトを制作されている方、アイキャッチのディレクションをする方にとって参考になれば幸いです！ 紹介したいWebメディアが
習慣は力なり！「Daily UI」でUIの引き出しを増やそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ マーケティングチーム所属のシエロです。 桜も散って、令和になり、だんだんと夏に近づいてきましたね。新しい季節になると新しいことにチャレンジしたくなりませんか？ Web制作やWebメディアにいると、どのポジションでも避けては通れなくなっているのが「UI（ユーザーインターフェース）」。 ただ、どうやってイケてるUIを作れるようになるのかしら…そのために何をすれば良いのかしら… 制作に関わる人なら悩んだことがきっとあるはず！ そんな中、最近見つけた「Daily UI」がUIの引き出しを増やすのによいかも！と思ったのでご紹介させていただきます。 Daily UIとは? https://www.dailyui.co/ ひとことでお伝えするとUIデザインの100本ノックです。 「UIに関する100個のお題に対してUIデザインを作り、「#DailyUI」をつけてTwitterなどのSNSに
みなさんこんにちは！ デザイナーのえびちゃんです。 デザイナーになると、制作物には必ず締め切りが存在しますよね。スクール通学時代など、デザインを勉強している段階ではたっぷり時間をかけてデザインに取り組むことが可能ですが、お仕事となるとそうはいきません……。 特にデザインの仕事に就いてまもないと、スピードが上がらないと悩んでいる方も多いのではないかと思います。私も入社した当初はアイキャッチ（サムネイル画像）1枚に3日（！）もかけて作成していましたが、それから1年経ったいま、数時間で作成できるようになりました。 今回は、私がアイキャッチやバナーなどの制作スピードを上げるために意識的におこなったったことを紹介していきます！ デザイン編 3選 まずは、デザインに関して意識して取り組んだことを紹介します！ ①最初にレイアウトを固めてから配色などの装飾する PhotoshopやIllustratorな
【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまいまいです🦀 みなさん、駆け出しのWebデザイナーのころってどんなことを学びましたか？ デザインツールの使い方、フォント、レイアウト、配色、コーディング、etc……。 いろんなことを学びますよね。今回は、「めちゃくちゃ大事なのに言葉でサラッと説明するのが難しい」「はじめからきちんと理解しておけば……」と私が感じた画面サイズについて書きます！ 独学でつまずいていませんか？ Webデザインの基本を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 カンバスサイズ PhotoshopもしくはXDやFigmaでデザインをつくると
2022.11.15 働き方 プログラマーお金CTO 降格ーー。会社員にとって最も聞きたくない言葉の一つだろう。せっかくつかんだポジションを降格させられたら、今まで自分がやってきたことを否定されたと感じる人もいるかもしれない。 しかし、ひたすら降格し続けているのに、むしろどんどんハッピーに働いている人がいる。それが、システム開発やWeb制作を中心に企業のDX支援を行う株式会社LIGでエンジニアとして働くづや（高遠和也）さんだ。 づやさん（@zuya_osora） 1983年生まれ。長野県出身。愛知工科大学卒業後、東京でエンジニアとして勤務。2007年、吉原ゴウと株式会社アストロデオを共同創業。12年に株式会社LIGと合併し、LIGの技術部門の中核として事業を支える。20年、取締役およびCTOを退任。ちなみに本名は高遠和也 創業メンバーとしてLIGの草創期を支え、CTOとして活躍するも退任。
デザインスピード1.5倍！？Adobe XDにおけるデザインデータ管理術 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 常に美しいデータ管理を模索中のありさんです。 突然ですが、XDでデザインしているとき、データってカオスになりがちですよね……？ メインコンポーネントがどこだかわからなくなる XDがフリースタイルすぎて、とっ散らかる 自分しか理解できない置き場所になってしまう 自分だけで作っているときは良いですが、いざフロントエンドやバックエンドのエンジニアさんにお渡ししたときに「これどうなってるの……？」って困らせてしまうケース……私はめっちゃあります！！！！！ そんな、プロジェクトの平和のために、ワイヤーフレーム作成、デザイン作成時の管理方法を作ってみました。 今回紹介する管理方法を実際のプロジェクトでも使ってみたところ、プロジェクトメンバーとの意思疎通もスムーズでデザインスピードも1.5倍（体感）くらいになったので、紹介します。 XDデータをつくるうえでの要件 プロジェクトメンバー全員が
問い合わせから提案までを爆速に！Webサイト提案で使える分析解析ツール9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナー・ディレクターのありさんです。 お客様からのリニューアルのご相談、サイト改善を行うときに、営業提案資料を作っています。今回は資料作成で私が調査・分析に使っているWebツールを紹介します！ NDA締結前はGoogleアナリティクスやGoogle Search ConsoleなどGoogle系ツールを共有してもらうことできないので、外部の調査ツールを使うことが多いです。 提案を行う際によく使うWeb解析ツールの概要や活用例、おすすめの種類などについてを紹介します！ Googleアナリティクス GoogleアナリティクスではPVや訪問数、直帰率など、Webサイトに訪問したユーザーの行動がわかります。 目標設定を行なっている場合は、目標完了数、目標完了率を確認することが可能です。 NDAを結んでいてGoogleアナリティクスのデータを見せてもらえる場合は、提案資料に活用しま
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
ベイジ枌谷氏に聞く！年間400件超のお問い合わせを獲得しているWeb制作会社が実践しているマーケティングとは？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はなんと、Twitterをやっているビシネスパーソンなら多くの方がフォローしているであろう、株式会社ベイジ代表の枌谷さん（@sogitani_baigie）に取材させていただきました！ Web制作事業のマーケティングに携わる一人間としてベイジ社の取り組みや枌谷さんの発信は数年前からずーーーっと追いかけてきたので、完全なる同業者にも関わらず（汗）こんな貴重な機会をいただけて本当に光栄です……！（涙） 制作会社で働くみなさまはもちろんのこと、自社のお問い合わせを増やしたい経営者・マーケターのみなさまもぜひぜひご一読ください！ 年間400件超のお問い合わせを獲得するまでに取り組んできたことまこりーぬ：枌谷さん、本日はどうぞよろしくお願いいたします！ 年始に公開されていたベイジの2020年の抱負ブログを読んで驚いたのですが、ベイジさんはものすごい数のお問い合わせを獲得されていますよね！？ 枌谷
PDFから超簡単文字起こし！Googleドライブが優秀すぎた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ オフショア開発チームで通訳/翻訳をしているゆまです。 今回は長年の悩みだった「PDFの文字起こし」について、感動する出来事があったのでシェアさせてください。 ※手っ取り早く方法だけ知りたい方は、「Googleドライブで文字起こしする方法」からご覧ください！ ある日の出来事 翻訳依頼が入りました。 しかし、原本がPDF…… しかもWordなどから生成されたものではなく、スキャンされた画像…… わかります……最終的に保管したい文書ってサイン済、捺印済の書類ですよね……。 これ、翻訳担当あるあるじゃないですか？ 翻訳に限らず、コーポレートあるあるな気がするのですが、皆さんどうですか？ けっこう前に締結した契約書をベースにしたい、でもWordファイルどっか行っちゃった、とか……。 原文、どうやって文字起こしする？手打ちする？ さて、こういった状況の場合、どうやって文字起こししますか？
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
みなさんこんにちは！ デザイナーのえびちゃんです。 フォントってデザインの印象を決めるのにとても大事な要素ですよね。 フォントを変えるだけでガラッと印象が変わったり、しっくりこないな〜と思って先輩にレビューをもらったらフォントが原因だと気づいたり……。 ですが、デザインをはじめて間もないころだと、知っているフォントも少なく、出したい表現に近いフォントを探すのにも一苦労しますよね。 街中でよく見かけるフォント、使いたいけど名前がわからない、とかとか……。 そんなデザイナーの方に向けて、普段私がアイキャッチやバナーなどグラフィックデザインでよく使用している・使用したいなと思ってアクティベートしているAdobeフォントを、見せたいイメージ別に実際の制作物を用いながらご紹介します。 【LIGブログ編集部からのお知らせ】 独学でつまづいているなら「スクール」での勉強もおすすめです！ えびちゃんが学ん
新年度も始まったということで、去年に引き続き注目トレンドのWebサイトをいっぱい見漁ってきました。 徐々に緩和されつつありますが、移動や外出が制限されていたこともあり、より刺激的な体験をインターネットに求める傾向がありました。また、社外だけではなく社内のコミュニケーションもオンラインが当たり前になっていることから、より効率的なコミュニケーションが模索されてきています。 AIを使ったサービスが爆発的に認知を広げていたりとさまざまな変化があるなかで、Webサイトはどう進化していくのでしょうか。妄想を膨らませながら見ていきましょう。 ※今回こちらの記事を参考にしています。 Top Web Design Trends of 2023 11 engaging web design trends for 2023 9 interactive web design trends for 2023 こんな
canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コードレビューを成功させるには？ CTOが考えるべき7つのこと│監修：高遠和也（株式会社LIG CTO） - FLEXY（フレキシー）
フリーイラスト素材サイト39選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「自分でやった方が早い病」を克服したい。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
フリー画像・写真素材サイト15選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
GASを使ったスクレイピングの作成手順を紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイトマップの作り方！デザイナーのアレンジ技5選 | 株式会社LIG
【2022】注目のWebデザイントレンド13選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイト制作・ホームページ制作発注の流れと事前知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
伝わる図解の作り方～レイアウトや配色のポイントを解説～ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
CSSで要素の表示・非表示を切り替える方法いろいろ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
作字テクニックのひとつ「文字を溶かす」を徹底解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
アイキャッチデザインで参考になるWebメディア37選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイン制作のスピードを上げるために取り組んだこと7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「三度目の正直もダメでした」CTOを3回退任→現場エンジニアになったLIG元取締役づやさんの“最良の選択” - エンジニアtype | 転職type
【現役デザイナー厳選】おすすめAdobe Fonts23選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
注目のWebデザイントレンド10選【2023】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
minne.com
soen.tokyo
news.yahoo.co.jp
torihikolife.com
anond.hatelabo.jp
full-count.jp