はてなブックマーク

インターネットのみなさん、こんにちは。せなです。 最近X（旧Twitter）のタイムラインを開くたびに「Claude Code」の文字列が視界に飛び込んできます。果たしてこれがエコーチェンバー現象なのか、本当に世間で流行っているのか真偽は定かではありませんが、AI驚き屋の一人としてClaude Codeに触れていきます（追記：どうやらAI驚き屋は廃れたらしいです）。 さて、僕自身はフロントエンドで本格的なWebサイトを実装した経験がまったくありません（コードは一応読めます）。そんな人間が、CTOであるづやさんからの「社内LPをClaude Codeで作れない？」という熱い期待に応えるべく、Claude CodeだけでLPを実装してみました。

こんにちは、今年1月にLIGに入社したえりかです。今回はコーディング経験ゼロの私が、AIと会話するだけで社内の基幹システムを作れてしまう「Vibeコーディング」についてのお話をします！ LIGでは、プロジェクトの見積もりやヨミ表、請求・支払い管理など業務の一部をスプレッドシートで管理していました。ただ管理するシートの数が多く、必要な情報にたどり着くまでにひと手間かかる状態。 「もう少しスムーズにできたら」という声を受けて、部長のしんさんが年末からClaude Codeでシステムの土台づくりを進めており、私は入社直後にそれを引き継ぐ形で合流しました。 前職でバックオフィス業務に携わってきた経験から「ここが不便」という感覚はすぐに持てたので、思い切ってこのプロジェクトを任せてもらえることになりました。 そこから約2ヶ月。見積申請から請求/支払管理まで一気通貫の社内システムを作るところまで来てい

こんにちは、メディアディレクターのヒロです。 みなさん、Gemini使ってますか？ 僕は毎日のように使ってるんですけど、最近まで大きな勘違いをしてたんですよね。 実はGeminiには 2つの入り口 があって、それぞれぜんぜんキャラが違うんですよ。これを知ってから、仕事の効率がかなり変わりました。 この記事では、「アプリ・Web版Gemini」と「Google AI Studio」の違いを、実際に両方使っている僕の視点から詳しく解説していきます。 ※本記事の内容は2026年3月時点の情報をもとに執筆しています。各サービスの仕様、対応機能、料金、利用上限は変更される可能性があります。 そもそもGeminiとは？ 違いを説明する前に、Geminiについて簡単におさらいしておきますね。 GeminiはGoogleが開発した生成AIモデルです。テキスト、画像、音声、動画など複数の形式を同時に扱える「

LIGでフロントエンドエンジニアをしているいとしゅんです。 Slackのtimes（社内の個人メモのようなチャンネル）で、日々「これいいな」「これは気になる」と思ったWebサイトやWeb関連ニュースを、メモ代わりに投稿しています。 社内でも「参考になる」と言ってもらえることが多く、せっかくなので月ごとにまとめて公開していくことにしました。 今回は2026年2月版として、気になったサイト・ツール・読みものをジャンル別にまとめます。Web制作に携わる方のインプットの参考になればうれしいです。 ▼前回の記事はこちら 今月気になった「Webサイト・表現」 「大神」20周年記念特設サイト https://www.capcom-games.com/o-kami/20th/ja-jp/ カプコンのゲーム「大神」20周年記念特設サイト。 水墨画や日本画をモチーフにした和のデザインで、筆のタッチを活かしたア

あなたの知らないロゴの裏側、覗いてみませんか？ 毎日何気なく目にしているあのロゴたち。お店の看板、スマホのアイコン、飲み物のパッケージ……気づけば私たちの周りには、たくさんのロゴがあふれていますよね。 でも、ちょっと立ち止まって考えてみたことってありますか？ 「このロゴって、どうやって生まれたんだろう？」「なんでこの色なんだろう？」なんて。 実は、そこにはデザイナーさんの熱い想いや、驚くような歴史、そして「へぇ〜！」と思わず声が出るような、意外な発見が隠されていることがたくさんあるんです！ ロゴのバックグラウンドを知ると、「めっっっちゃこのロゴ好き〜！」となる、少しデザイン変態気味なデザイナーまきまきが、そんなとっておきのロゴたちをご紹介します！ 見慣れたロゴの「もう一つの顔」を、一緒に覗きに行きませんか？ きっと、今日から街の景色が少し違って見えるはずですよ！ Suntory （サントリ

LIGでフロントエンドエンジニアをしているいとしゅんです。 Slackのtimes（社内の個人メモのようなチャンネル）で、日々「これいいな」「これは気になる」と思ったWebサイトやWeb関連ニュースを、メモ代わりに投稿しています。 社内でも「参考になる」と言ってもらえることが多く、せっかくなので月ごとにまとめて公開していくことにしました。 初回は2025年12月〜2026年1月の2ヶ月分をジャンル別にまとめました。毎月更新していくので、Web制作に携わる方のインプットの参考になれば嬉しいです。 今月気になった「Webサイト・表現」35選 AZERO – Welcome to our warehouse https://azero.industries/ 没入感強めのECサイト。ECでここまで世界観に振り切るのは勇気がいると思うけど、体験としてかなり印象に残ります。 SHIFTBRAIN P

SEOって本当に終わるの！？ 業界大激変の未来予想図 ヒロ：今回藤井さんをお呼びしたのは、ある噂にケリをつけたかったからなんです。 藤井：噂ですか？ ヒロ：ハイ！ こんな噂聞いたことないですか？ 「SEOオワコン」 藤井：あー、ありますね。 ヒロ：これってChatGPTが登場したあたりからずっと言われているんですよね。でも最近特によく聞くようになって。僕もSEOに両足突っ込んでいる身として、「SEOが終わる」なんてバカげてるって思うんです。 藤井：ふむふむ。 ヒロ：LIGブログ読者でも、噂に振り回されてほとほと困っている人も多いはず。だからSEOのプロにハッキリと「根拠のない噂だ」って言ってもらいたいんです！ お忙しいのに、こんなことに付き合わせちゃってすみません。でもたった一言でいいんです、ズバリ言っちゃってください！ 藤井：わかりました。SEO、終わります。 ヒロ：あざーーーーーーっす

LIG Creative部 マネージャーのユースケです。 最近、「デザインの単価が下がっている」という話をよく耳にします。僕からすれば、これは「誰でもデザインできる時代」の光と影が表れた結果だと思っています。ノーコードツールの普及や、スマホでの動画編集など、たしかにデザインのハードルは下がっています。でも、本当にそれでいいのでしょうか？ ツールが便利になったことで、「クオリティの高いものじゃなくていい」「とりあえず形になればいい」と考える人が増え、そのニーズに応えるかたちで、経験の浅いデザイナーが「なんとなく」価格を安く設定してしまう。これが業界全体の価格の基準を崩す原因になっているのではないかと思うのです。 「ちゃんと価値を届けられるデザイナー」になるために、これからデザイナーとして独立される方、これからデザイナーを目指すみなさんに、マネージャーとして現場で感じていることをお話ししたいと

AWS開発・導入を検討しており会社探しを始めたものの、以下のようなお悩みをお持ちではないでしょうか？ 開発会社ごとの特徴や違いが分からない 自社に合う開発会社って結局どこ？ とにかく実績が豊富な会社を知りたい そこでこの記事では、AWSを活用した開発やサーバー構築に強みを持つ会社を9社厳選してご紹介します。 各種システム・アプリ開発をおこなっている弊社LIGが同業者の視点で選びましたので、参考になれば幸いです。 弊社LIGでは業界歴15年以上や大手外資系出身のベテランコンサルタントが伴走しつつ、AWS環境の設計、インフラ構築、開発、運用保守までワンストップで対応可能です。 また、フィリピン、ベトナムにオフショア開発拠点も保有。海外エンジニアの活用で人件費を約50％削減可能（当社比）です。さらに、国内の担当者が責任者・窓口をつとめるため、コミュニケーションの不安なく進めることができます。 人

今回は、実際にDockerイメージをビルドし、docker-compose.ymlを使ってLaravelのアプリケーション環境を立ち上げる手順を解説していきます。 Dockerfileの書き方 まずは、LaravelアプリケーションをDocker化するためのDockerfileを作成します。 Dockerfileとは？ Dockerfileとは、Dockerコンテナのイメージを作成するためのテキストファイルです。 このファイルは、Dockerイメージの設計図のようなもので、コンテナのベースイメージや環境設定、アプリケーションのインストール手順、実行コマンドなどが記述されています。 イメージはDocker Hubなどの外部レジストリからダウンロードして使うことも可能ですが、自分が作成するアプリケーションに適切な環境を構築するために、Dockerfileでカスタムイメージを作成することが一般的

こんにちは。LIGクリエイティブ部マネージャーのユースケです。 みなさんは、企業やサービスのブランドコンセプトを新たに作るときに、どんなことから考えはじめますか？ 企業メッセージ？ ミッション？ ビジョン？ あるいは色やロゴ、メインビジュアルでしょうか？ 「一体どこから手をつけたら良いのかわからない！」 ……このような悩みは、ブランド構築に携わった方なら誰もが一度は経験したことがあるのではないでしょうか。 そんなときに役立つのが「フレームワーク」です。 今回は、ブランドコンセプト作りに役立つフレームワークを12個厳選してご紹介します。 それぞれのフレームワークについて、具体的な活用例を交えながら解説していきます。私たちLIGでも実際に活用しているものもありますので、過去の事例なども参考にしながら、さまざまな場面での使い方をご説明していきたいと思います。 2007年の創業以来、大企業から個人

新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、新米エンジニアのにっしーです。最近Three.jsを使っている際にパソコンのスペックが足りず少し重いので、上司にお願いしてPCのスペックを上げてもらおうかと考えています。 そんなことはさておき、Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」を勉強しています。 この連載では、Three.jsを使った制作物を紹介していきますので、同じようにThree.jsの勉強をされているみなさんの参考になれば幸いです！ 前回は、スフィアジオメトリとテクスチャを用いた惑星とパーティクルを使用し星を作成し、宇宙空間を作成しました。まだの方

こんにちは、LIGの「生成AIコンサルティング」チームのかけるです。 最近はChatGPTをはじめ、ClaudeやDeepSeek、Grokなどさまざまな対話型AIモデルが話題を集めています。なかでも、Googleが開発する生成AI「Gemini」は、その高い性能と使いやすさから、とくに注目を浴びています。 実際に私も生成AIのコンサルティングをおこなうなかで、クライアントにGeminiをオススメするシーンがかなり増えてきました。 というわけで、本記事ではGeminiの主なモデルや料金プラン、基本的な使い方、具体的な活用事例についてご紹介したいと思います。 「Geminiについて詳しく知りたい」 「AIサービスを構築する上で、最適なモデルを模索したい」 「さまざまな生成AIモデルがあるなかで、なにがおすすめか知りたい」 など、Geminiを検討してる方はぜひご覧ください！ 「Gemini（

こんにちは、テクニカルディレクターのチェです。 今回の記事では、VSCodeの拡張機能であるPrettierについて、インストールや初期設定の方法を説明します。 開発時にPrettierを使うことで作業の手間を減らせることができるので、ぜひ使ってみてください。 Prettierとは？ Prettierとは、バラバラに書かれているコードをあらかじめ用意したコードスタイルに従って自動で整形してくれる便利なツールです。 Prettierを導入することで、以下のようなメリットがあります。 コードスタイルの一貫性：開発者間でコードの書き方を一貫させることができます。 可読性の向上：自動整形により、コード構造が明確になり、コードのネストを簡単に把握することができます。 作業効率の向上：手動でインデントや改行を調整する必要がなくなり、時間の節約にもなります。 Prettierを使うとこうなる Prett

新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、テクニカルディレクターのチェです！ 今回は、私が入社してから今までアサインされてきた案件で使っているDockerについて、概念や基本用語、メリット・デメリットを紹介します。 Dockerは環境構築を簡単にしたり、リソースを効率よく使いながら高速に起動させることができるなど、多くのメリットがあります。そのため、最近はDockerの利用が広がっているんですよね。 今回は皆さんの勉強にもなればと思い、私がDockerを学んでいく過程で得た知識をまとめました。 ぜひ、最後まで読んでいってください！ Dockerとは、コンテナ仮想化技術を利用して、アプリケーションの開発・実行できる環境を一つのコンテナにまとめて配置、実行

新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、新米エンジニアのにっしーです。 Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」を勉強しています。 この連載では、Three.jsを使った制作物を紹介していきますので、同じようにThree.jsの勉強をされているみなさんの参考になれば幸いです！ 今回は主にテクスチャの勉強として、惑星とその周りにパーティクルを散らせた宇宙空間的なものを作りました！ ちなみに前回は、テキストジオメトリとボックスジオメトリを活用して自分の名前をデコデコにしました。まだの方はこちらもぜひご覧ください！

// canvasを取得 const canvas = document.getElementById("canvas") as HTMLCanvasElement; if (!canvas) return; // シーン const scene = new THREE.Scene(); // サイズ const sizes = { width: window.innerWidth, height: window.innerHeight, }; // カメラ const camera = new THREE.PerspectiveCamera( 75, sizes.width / sizes.height, 0.1, 3000 ); camera.position.set(0, 0, 100); scene.add(camera); // レンダラー const renderer = ne

づや：そうそう、あのスピード感はすごい！ 簡単にプロトタイプを作れるし、アイデアさえあれば、誰でもサービスを立ち上げられる時代になった。 ありさん：そうなると、Webサービス開発の敷居が劇的に下がる分、次の課題って「どうやって収益化するか」だと思うんですよね。 づや：本当にそう。APIがシンプルで誰もが扱いやすくて生成AIとの相性がいい決済サービスがあったら、それこそすぐにでも収益化できるよね。 ありさん：ですよね。あっ！ それなら、今私が勤めているPAY株式会社の決済サービス『PAY.JP』を使ってみてくださいよ！ PAY.JPとは？ PAY株式会社が提供するオンライン決済サービス。シンプルなAPIと豊富なライブラリにより、クレジットカード決済を簡単に導入することができます。クレジットカード決済、定期課金、Apple Pay、プラットフォーム決済、通知機能など、必要な機能を1つのアカウン

こんにちは！ インハウスデザイナーのまっつーです。 2024年も残すところあとわずかですね。 今年のWebデザイン業界は、生成AIの進化で制作方法が大きく変わった一方で、手書き風のイラストやノスタルジックデザインなど、人間らしい温かみのあるWebサイトを多く見かけました。デジタルな表現と人間的な表現が共存した興味深い一年だったように思います。 そんな激動だった2024年のWebデザイントレンドを15個にまとめたので、一気に振り返っていきましょう！ ※今回はこちらの記事を参考にしています。 9 innovative web design trends for 2024 7 emerging web design trends for 2024 and beyond Top Web Design Trends 2024 The biggest, boldest web design trend

こんにちは！ インハウスマーケティング部のりこぴんです。 Webサイトのサイトマップやワイヤーフレームを考えるのって重要でありながら、とても時間がかかりますよね。 今回はプロンプトを入力するだけで一瞬でサイトマップとワイヤーフレームを作成してくれる生成AI「Relume」の使い方をご紹介します。 Webサイトの構成を少しでも効率化したいという方はぜひ試してみてください！ Relumeってなに？ Relumeとは Relumeとは、Webサイトを効率的に作成するために設計された生成AIです。大きな特徴は、Webサイトの概要を簡単に入力するだけで、AIが瞬時にサイトマップやワイヤーフレームを生成してくれること。 さらに、FigmaやWebflowなどのデザインツールと連携して編集することもできます。 サイトマップやワイヤーフレーム作成の効率化のために使用されることが多く、今注目を集めている生成

新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、テクノロジー部の山﨑です。 本記事は、実際にサーバーを構築しながら、よく使われる用語や構築の仕方をわかりやすく解説するシリーズです。サーバーをろくに触ったことのない新卒の自分が、サーバー移管作業を任されたときの経験をもとに作成しましたので、ご安心ください！ 一緒に学んでいきましょう！ 今回はその第二回目で「AWSアカウント作成からSSH接続するまで」を実際に手を動かしながら解説していきます。 この記事に沿って進めると、EC2インスタンスの作成とEC2インスタンスへのアクセスができるようになります。インスタンスとは何か、SSHについて等わからない箇所は、前回の記事にまとめてありますので、そちらをご覧ください。 A

新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 UI/UXのデザインツールとして知られるFigmaですが、ホワイトボード機能を持つ「FigJam」に続き、今年6月に新たなプロダクト「Figma Slides」が登場しました。 もともとFigmaでスライドを作成していたのですが、Figma Slidesを使い始めてからはとにかく使い勝手が良く、手放せない存在になりました。 今回は、Figma Slidesの機能や使用感についてご紹介いたします。 Figma Slidesの特徴・機能 https://www.figma.com/ja-jp/slides/ スライドモード／デザインモードが切り替えられる Figma Slidesの一番の特徴は、基本的なスライド作成機能と高度な

新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、新米エンジニアのにっしーです。今回は、私がプログラミング学習にGitHub Copilotを取り入れた理由について、経験を交えてお話ししたいと思います。 「初学者がGitHub Copilotを使うと、AIに頼りすぎて自分が成長しないのではないか？」と考える方もいるかもしれません。実は、私も最初は同じような不安を抱いていました。しかし、実際に使ってみるとその考えは180度変わりました。今ではむしろ、初学者こそGitHub Copilotの導入を強くおすすめしたいと思っています。 なぜそう考えるのかの理由を、検証を交えて書いていこうと思います。 そもそもGithub Copilotとは？ GitHub Copil

こんにちは！ インハウスデザイナーのまっつーです。 Adobeのクリエイター向け年次イベント「Adobe MAX 2024」が2024年10月15日に開催されました。そこで発表された、PhotoshopとIllustratorの新機能やアップデート、もうチェックしましたか？ 今回の発表はワクワクするものばかりで、クリエイティブ作りがグーンと楽しくなりそうな予感です！ 実際に使いながら新機能とアップデート情報をまとめたので、ぜひチェックしてみてください。 Photoshopの新機能紹介 Firefly Image3モデルに対応！より高品質で詳細な画像生成が可能に 画像引用元：Adobe Blog 従来の生成塗りつぶしで使用されていた「Firefly Image1」モデルが「Firefly Image3」モデルにアップデートされました。 簡単なテキスト入力だけで、照明や影、遠近感なども自動で判

こんにちは！ インハウスマーケティング部のりこぴんです。 最近はさまざまな画像生成AIツールが台頭し、目まぐるしい進化を遂げていますね。 今回は、まるで一眼レフで撮影しているかのようにハイクオリティな画像が生成できる「ImageFX」をご紹介します！ しかも無料で使用できるという優れもの……。基本的な機能や使用する際のコツなども詳しく紹介しているので、ぜひ参考にしてみてください！ ImageFXについて ImageFXとは ImageFXとは、Googleが開発した画像生成AIツールです。 Googleの最新の画像生成AIモデル「Imagen 3」を搭載していて、生成できる画像品質の高さから最近とても注目が集まっています。 人物の顔や肌の質感、髪の毛の細部まで精密に表現され、実写と見分けがつかないほどハイクオリティな画像が生成できるようになりました。 2024年10月現在、Googleアカ

突然ですが、下記のバナーにはデザインのルール上あまり適切でないことが含まれています。 ・ ・ ・ みなさんはわかりましたか？ 「なにがよくないのかわからない……」という方は、ぜひこの記事を最後までご覧ください！ 今回は新米デザイナーさんに向けて、先輩からはじめに教わるデザイナーが覚えておきたい基本やポイントをご紹介します。レビュワーの立場にあるデザイナーの方も、デザインのチェックリストとして使っていただけると幸いです！ （すぐに答えが知りたい方はこちらをクリックしてジャンプ！） 今回ご紹介するのは、デザイナーなら誰もが一度は目にするような基本中の基本です。ただし、これらは「絶対的なルール」というわけではありません。経験豊富なデザイナーさんであれば、状況に応じてあえてこれらの基本を外すこともあると思います。 でも、覚えておいていただきたいのは、ルールを知った上で破るのと、知らずに破るのでは大

こんにちは、LIGの「生成AIコンサルティング」チームのかけるです。 LIGでは、AIを活用した企業のDX支援をおこなう「生成AIコンサルティング」事業のスタートに伴い、生成AI活用の専門家である梶谷 健人さんを戦略顧問としてお迎えしました。 先日、梶谷さんによる生成AIについて学ぶ社内勉強会を実施しました。今回は、社会人向けWebデザインスクール「デジタルハリウッドSTUDIO by LIG」を運営するデジタルエデュケーション部のメンバー向けに、生成AI×クリエイティブ領域の現状やデザインの未来などさまざまなパネルテーマでお話しいただきました。 本記事ではその勉強会の様子を一部お伝えします！ 「生成AI時代のデザインの未来について知っておきたい」「クリエイティブ領域の生成AI活用を模索したい」とお考えの皆さま、ぜひご覧ください。 株式会社POSTS代表 梶谷 健人 氏生成AIなどの先端テ