コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】

2024/07/23 15 users コピペ 時短 爆速 UIコンポーネント集 便利ツール

開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。 この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。 表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。 おしゃれな... 続きを読む

なぜWebサイト制作は失敗しやすいのか？巨大プロジェクトから学ぶ成功の鍵とは | [マーケターコラム] Half Empty? Half Full?

2024/07/09 18 users Half Empty Half Full プロジェクト 成功

みなさん、こんにちは。瀬川義人（@motoy0shi）です。 突然ですが、みなさんはWebサイト制作で「こんなはずじゃなかったのに……」という経験はありませんか？ お恥ずかしい話、私はあります。 かつて自社のWebサイト制作に関わったときのことです。制作のプロジェクトマネージャーとして入ったのですが、始まって早々、別... 続きを読む

Tailwind CSSを使う時の疑問と解決方法

2024/01/24 17 users Tailwind CSS CSS 疑問 CSSファイル 結果

2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会... 続きを読む

生成AIでWebサイト制作を8週間→3週間に短縮　ベネッセ、業務効率化でコスト4割減に成功

2023/10/27 18 users ベネッセホールディングス ベネッセ 進研ゼミ 従来 生成AI

ベネッセホールディングスは、生成AIとノーコードツールの導入により、Web制作業務の効率化に成功したと発表した。「進研ゼミ 中学講座」のWebサイト制作する際、従来かかったコストが4割減、制作期間は8週間から3週間へ短縮できたという。 ベネッセホールディングスは10月27日、生成AIとノーコードツールの導入により、... 続きを読む

Webサイト制作の要件定義書の確認項目｜重松佑 / Shhh inc.

2023/07/13 394 users 要件 重松佑 最小限 メモ プロジェクト進行

プロジェクトのキックオフ前後に作成する要件定義書。確認の抜け漏れを最小限に抑えるには、どのようなことを記載しておくべきか。そして、メンバーへのスムーズな共有と、その後の円滑なプロジェクト進行のための、良い要件定義書とはどのようなものだろう。自分たち用のメモも兼ねて「Webサイト制作プロジェクトの要件... 続きを読む

独学フリーランス必読！Webサイト制作に必要な知識が学べる書籍5選 | MonoStack

2023/06/02 20 users ディレクション コーディング フォーカス MonoStack

Web制作はデザインやコーディングの知識だけでは成り立たず、制作前後にも重要な工程はたくさんあります。しかし、作り方にばかりフォーカスが当たり、契約や法律周りの情報、ディレクション、Web運用などの知識はおざなりにされがちなのが現状。そこで今回はWebサイト制作と、その前と後を学べる書籍を6冊紹介します。... 続きを読む

「AIによる自動Webデザイン」についてChatGPTでブログ記事を書いた＋使ってみた雑感

2023/02/14 6 users OpenAI chatgpt 人工知能 チャット形式 文章

2023年2月14日 Webサイト制作, 便利ツール アメリカのOpenAIが公開した自然な文章を生成する人工知能（AI）、ChatGPT。チャット形式で質問に答えて自然な言葉で返してくれます。みなさんもう使ってみましたか？今回は「AIによる自動Webデザイン」について、ChatGPTにブログ記事を書いてもらいました！ChatGPTを使ってみ... 続きを読む

jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード（基礎編）

2023/01/23 357 users jQuery React Svelte Vue 構文

なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ず... 続きを読む

懐かしのmarquee？テキストを自動スクロールさせる方法と実装例

2023/01/18 6 users Marquee CSS テキスト 実装例 タグ

2023年1月18日 CSS, JavaScript, Webサイト制作, Webデザイン 最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テキストが右から左に自動スクロールするという、かつての「marquee」タグを彷彿させる動きです。今回はこの自動スクロールテキストに注目してみます。 marquee とは かつ... 続きを読む

ダークモード時の画像の扱い方

2022/11/10 26 users 扱い方 画像 彩度 明度 CSS

2022年11月10日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色... 続きを読む

今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流

2021/11/04 28 users JamStack ヘッドレスCMS マルチデバイス CMS

CMS（コンテンツ・マネジメント・システム）とは、ブログやWebサイトなどで活用されているコンテンツを管理するための仕組みです。代表的なものとしてWordPressやMovable Typeが挙げられ、主にWebサイト制作に使用されています。本記事では従来のCMSとは異なる概念であるヘッドレスCMSについて利用シーンとともに紹介し... 続きを読む

Instagramの投稿一覧をWebサイトに表示できる【LightWidget】

2021/10/06 15 users Instagram 公式 便利ツール Webサイト 投稿 方法

2021年10月6日 Webサイト制作, 便利ツール WebサイトにInstagramを掲載したい！と思ったときに、意外とその方法が見当たらなかったりしませんか？各Instagramの投稿をブログ記事などに埋め込む方法は公式でありますが、投稿一覧を掲載するには今回紹介する「LightWidget」というサービスを使うと便利ですよ！ この記事は... 続きを読む

ポートフォリオサイトをNuxt + Netlifyに移行しました | Webクリエイターボックス

2021/07/14 14 users ポートフォリオサイト Nuxt Netlify Vue.js

2021年7月14日 Nuxt JS, Vue.js, Webサイト制作 WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 移行を決めた理由 元々私のポートフォリオサイトは、まだ私が学生だった... 続きを読む

【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/07/08 18 users Pulp Note hover時 Tips CSS 矢印

Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印... 続きを読む

Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.｜note

2021/07/06 598 users 重松佑 タスク化 粒度

プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも... 続きを読む

無料でアイコンやイラストを配布している8つのサイト | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/07/05 13 users テイスト Pulp Note Tips 大手 アイコン

アイコンやイラストの素材はいくらあっても足りないもの。特にWebサイトで利用する場合、サイト全体で一貫したテイストで表現したいため、大手の素材サイトでは難しいこともしばしば。 そこで今回はサイト内で一貫したテイストであり、無料でアイコンやイラストを配布しているサイトを8つ紹介します。素材で困ったらまず... 続きを読む

現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/24 12 users Pulp Note Tips レイアウト Flexbox 現場

現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一... 続きを読む

Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/17 228 users 依存性 初見 Pulp Note Tips 12個

Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありました... 続きを読む

現場で使えるCSSデザイン Tips 9選。覚えておくと便利なTipsを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/08 13 users CSS Pulp Note Tips 改行位置 現場

これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置を調整する見出しの改行位置を調整する見出し... 続きを読む

あなたのWeb制作をサポートしてくれるオンラインツール10選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/01 309 users Pulp Note Tips transform 現場 あなた

Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 CSS 3D Transform Examples CSS 3D Transfor... 続きを読む

IE終了後に即戦力なHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/05/20 13 users Pulp Note Tips デスクトップアプリケーション

マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く... 続きを読む

予算の少ないWebサイト制作は失敗する？Webサイト制作の実態調査｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL

2021/05/18 21 users 相関関 Webサイトリニューアル コンバージョン数 要因 成果

ツイート シェア PDFダウンロード 調査に至った背景 Webサイト制作で成果が出ない要因はどこにあるのか？ Webサイトの新規立ち上げ・リニューアルは、そのほとんどがコンバージョン数の増加や企業/サービスイメージの向上などを目的に実施される。しかし過去の研究レポート「WebサイトリニューアルとCV・CVR向上の相関関... 続きを読む

技術を教えるときの7つのポイント | Webクリエイターボックス

2020/08/18 16 users Webクリエイターボックス 技術 Tips ポイント 講師

2020年8月18日 Tips オンラインスクールの講師として約4年、WebデザインやWebサイト制作を教えていて気づいた、教えるときのポイントをまとめました。 この記事は動画でも紹介しています。動画派の方はぜひどうぞ！ 1. 目的を明確にする 今やってる事は何が目的なのか、なぜ必要なのか？そういったところを明確にしてい... 続きを読む

Googleフォントをサブセット化してページの読み込みをスムーズに | Webクリエイターボックス

2020/07/29 11 users フォント Googleフォント 速度 容量 便利ツール

2020年7月29日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみ... 続きを読む

Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは | アンドエンジニア

2020/06/16 515 users インタラクション アンドエンジニア デザイナー えん 分業体制

Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。 しかし、今回なめサンは、サイトの見た目・動きのデザインから開発まで、すべてひとりで行っている。 優れたアニメーションやインタラクション（ユーザー操作へのフィードバック）をデザインし、自ら実装するエン... 続きを読む