注目のWebデザイントレンド10選【2023】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
新年度も始まったということで、去年に引き続き注目トレンドのWebサイトをいっぱい見漁ってきました。 徐々に緩和されつつありますが、移動や外出が制限されていたこともあり、より刺激的な体験をインターネットに求める傾向がありました。また、社外だけではなく社内のコミュニケーションもオンラインが当たり前になっていることから、より効率的なコミュニケーションが模索されてきています。 AIを使ったサービスが爆発的に認知を広げていたりとさまざまな変化があるなかで、Webサイトはどう進化していくのでしょうか。妄想を膨らませながら見ていきましょう。 ※今回こちらの記事を参考にしています。 Top Web Design Trends of 2023 11 engaging web design trends for 2023 9 interactive web design trends for 2023 こんな
さくらのレンタルサーバ15周年！ロゴデザインコンテストにみんなで応募してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、社長のゴウです。 はじめてWebサイトを作ったのが20歳くらいのときなんですが、そのときに利用してたのがさくらのレンタルサーバです。もしかしたらロリポップだったかもしれませんがたしかさくらのレンタルサーバだったと思います。間違いない、今思い出しました。 さて、そんなインターネット業界を足元から支え続けてくれた、さくらのレンタルサーバがサービス開始から15周年を迎えるということで、公式のロゴを広く一般から募集するそうです。 採用されると50万円がもらえるので、LIGとしても応募をしようと思ったのですが、弊社に所属する一流デザイナー達は仕事が忙しくぜんぜんリソースが確保できませんでした。 なので、今回は社内で比較的暇そうだったこのメンバーで参戦したいと思います。 強そうなので、優勝間違いないでしょう。 教育事業部、まりなの場合 LIGで教育部門をまとめるまりな。 「デザインはやった
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
企画書に使える！信頼できるデータの引用元15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのなかみーです。 新人ディレクター向けシリーズの最終回ですね。 今回は、企画書を書くときに役立つ統計やアンケート結果などを公開しているサイトをご紹介したいと思います。 データで一番重要なのは、それが本当に“信頼できるものか”ということ。 発表元が信頼できる会社であればそのデータの信頼性は高いですし、100人に聞いたアンケート結果よりも10万人に聞いた方がより正しい統計データを得ることができますよね。 企画書に使えるような信頼できるサイトをまとめたので、お役立てください。 1. StatCounter http://gs.statcounter.com ブラウザのシェア率などを調べるときに使えます。 全世界だけでなく、日本国内で使われているブラウザにフィルタリングすることもできるのが便利です。 2. Similarweb http://www.similarweb.c
コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
Web編集者・ライターが間違うと恥ずかしい日本語の正しい用法10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木（@amanojerk）です。いま僕の背後では、社長から「デスクが汚い」と怒られたらしい上司が「守破離しなきゃ、守破離…」とブツブツ言いながらゴミを捨てています。 ちなみに、守破離（しゅはり）とは、 まず師匠に言われた型を「守る」ところから修行がはじまり、その型を研究してより自分に合った型をつくることで既存の型を「破り」、最終的には師匠の型、そして自分自身の型からも「離れ」て自在になる。 という意味の、要するに剣道とかのヤツです。多分なんですけど、断捨離（だんしゃり）って言いたかったんだと思います。 さて、かく言う僕も編集・ライティング業務に従事しておりますが、出版社や編集プロダクションの勤務歴はありません。また、今でこそ社内の編集者たちをとりまとめる立場ですが、僕の入社以前は社内に商業経験のある編集者・ライターがほとんどおりませんでした。 何が言いたい
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて
【2015年度版】イケてるデザインの国内コーポレートサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
【保存版】10分でわかるWebマーケティング手法の全施策まとめ【図解付き】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。ソウルドアウト株式会社のなごと申します。 「Web上でユーザを集めるための施策をすべて答えてください！」と言われたときに、パッと答えられる方は少ないのではないでしょうか？ Webマーケティングとひと口に言っても、その全体像を具体的にイメージできる人は少ないものです。本気で成果をあげたいと思ったら、まずはWebマーケティング全体を俯瞰した上で、施策を組み立てていくことが重要です。 今回は、一目でわかるようにWebマーケティングの全体像を1枚の画像にまとめました。また、それぞれの具体施策の概要やコスト感、即効性をわかりやすくざっくりとご紹介します。 マーケティングとWebマーケティングの違い まず前提として、マーケティングの中でも「Webマーケティング」の特徴について整理します。 Webマーケティングには以下のような特徴があります。 効果測定性 ハイスピード ローコスト パーソナ
スタッフページが個性的な、広告・Web系企業のコーポレートサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログ読者のみなさん、はじめまして、塩谷舞と申します。しおたん、と呼ばれています。日頃は恵比寿にある文化系の制作会社でせっせと職務に勤しんでおります！ 最近、自社サイトのリニューアルを担当したのですが、そこで最も力を入れたのが「スタッフページ」の魅せ方です。「インターネットに社員の個人情報を掲載するなんて、とんでもない！」という時代もありましたが、最近は日本でも様々な企業のサイト上にて、スタッフ紹介ページを見かけるようになりました。 ということで、ユニークな手法でスタッフ紹介をしている企業サイトをまとめてみたので、紹介させていただきます！ W+K Tokyo https://wktokyo.jp/people/ ※現在は閉鎖されています。 1980年代のアイドルを彷彿とさせる男女。シブがき隊でも、プリンセス・プリンセスでもありません。ポートランドに本社を持ち、世界的にそのクリエイティ
スマホサイトをデザインするとき参考になるWebサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており（総務省「情報通信白書令和３年度版」）、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェ
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
誰でも簡単にできるGoogleアナリティクスの検索キーワード分析入門 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのアートディレクターの長岡です。 前回の記事では、Webサイト制作に関する基礎についてお話させていただきました。 今回はWeb担当者ならぜひやっておきたいアクセスログ解析を使った、オーガニック検索からの流入、そのときに使われているキーワードの分析方法などについて説明していきます。 オーガニック検索からの流入ついて オーガニック検索とは、GoogleやYahoo!、Bingといった検索エンジンを利用してのサイト訪問になります。 これらを調べることで、「サイトを訪問するユーザーが、どういうことに興味・関心を持って自分たちのサイトを見ているのか？」「ユーザーに対して、きちんと有益な情報（コンテンツ）を提供できているか」を分析することができるようになります。 なお、2013年の9月より、Googleが全ての検索に対してSSL通信を使用することになった結果「(not provide
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
