Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
Webサイト制作の要件定義書の確認項目｜重松佑 / Shhh inc.
プロジェクトのキックオフ前後に作成する要件定義書。確認の抜け漏れを最小限に抑えるには、どのようなことを記載しておくべきか。そして、メンバーへのスムーズな共有と、その後の円滑なプロジェクト進行のための、良い要件定義書とはどのようなものだろう。自分たち用のメモも兼ねて「Webサイト制作プロジェクトの要件定義書」の確認項目をnoteに整理してみます。 1. プロジェクト概要1-1. 背景プロジェクトを発案するに至った背景です。現状の課題、ビジネス要件の変化、ユーザーの変化、社会的要請など、プロジェクトの存在意義や必要性を記載します。 1-2. ゴールゴールとは「完了条件」です。何を達成すれば終わるのか、どこに行けば終わるのかを記載します。通常は5W1Hのうち、WHATやWHEREをゴールとします。 1-3. 目的プロジェクトを何のために進めるのかという意図です。ゴールよりも広い視野で捉えます。5
こういう本を待っていた！ WebのUXを改善するライティングに特化された解説書 -Webコピーライティングの新常識「ザ・マイクロコピー」
マイクロコピーとは、Webサイトやスマホアプリのボタンのラベル、ボタンやフォームに添えるテキスト、エラーメッセージなどのUIデザインに使用される短いテキストのことです。優れたマイクロコピーを使用することで、入力ミスが少なくなったり、ボタンのクリック率があがったり、さまざまな効果を得られます。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど見かけませんか？ ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われる文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 WebサイトやスマホアプリのUIで使用する文言、ライティングのテクニックを身につけたい人にお勧めします。本書は「ザ・マイクロコピー（紹介記事）」の第2版で、内容は大幅にアップデートされています。 UIデザインで使用する言葉、ボタン、フォーム、ナビゲーションに使用する文言など、言葉の魅力でU
Google Analytics(UA)が使えなくなるのはどのくらいヤバくて、いつまでに何をしたら良いのかの話。 - フジイユウジ::ドットネット
タイトルにも書いていますが、Google Analytics(UA)がもうすぐ使えなくなるんですよ。 GA4っていうのになるらしいんですが、自動で切り替わったりしないし、何もしてないと単に使えなくなるんですよ。知ってました？ ※追記※2023年になって 自動的にGA4プロパティが作成されることになりました。しかし、むしろ手動ではないことで混乱しているようです。切り替えではなくGA4プロパティが追加されるんですが、そのデメリットについてはググって調べてね。 (UA)っていうのはGA4ではない、これまで使われてきたGoogle Analyticsだと思ってください。やや正確ではないのですが「GA4という最新版ではないGoogle Analyticsはすべてサービス終了される」くらいのイメージで捉えてもいいです。 業務で関わってる人たちからはGA4移行についての記事やツイートがたくさん流れてきま
文春オンラインの記事分析を支える爆速ダッシュボードを作るまで｜Shota Tajima
従来のGoogleアナリティクスである、ユニバーサル アナリティクス（以下UA）のサポートがいよいよ2023年7月に終了することが、先日アナウンスされました（※）。昨年対比やトレンドをチェックすることを考えると、2022年内できるだけ早めに次世代のGoogleアナリティクス（以下GA4）へ移行したいWebメディア運営者も多いかと思います。新しいツールの勉強や、既存システムの改修が必要な問題ではありますが、この機会を、データ収集・可視化の設計を見直し、日々の意思決定の共通言語としてデータを使いやすくするチャンスと捉えてみてはいかがでしょうか。 ※ Google、ユニバーサルアナリティクスのサポートを2023年7月1日に終了。早めのGA4移行を推奨 このnoteでは、前半でダッシュボードによるデータの可視化にコストをかけるべき理由を整理します。後半では、2021年秋に文春オンラインのダッシュ
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
2022年に流行するWebデザインの最新トレンド10個まとめ | Web Design Trends
2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンド予測をご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載しているので、ぜひご自身で体験してみてください。 1. 3Dイラスト 3Dのイラストを使ったデザインは、2021年の大きなトレンドの1つとなりましたが、2022年はさらに注目すべきトレンドの1つとなるでしょう。特に2Dのフラットなイラストを3Dに変化させたような、2Dと3Dを組み合わせたスタイルは要チェックです。 リアルで魅力的な楽しいイラストに、柔らかなキャンディーカラーと組み合わせたようなスタイルは、特にアプリのデザインなどでトップトレンドになると考えています。 Dribbb
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです
フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
Flexboxで実装する定番レイアウトのコードのまとめ
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
カスタマージャーニーマップを分析する7つの方法
ジャーニーマップを検討して、感情曲線の低いポイントと高いポイントや、期待値を設定できなかったところ、不要だったり長すぎるステップ、チャネルの遷移、真実の瞬間を特定しよう。こうした情報を利用して、カスタマージャーニーを改善するために取り組むべき状況を見つけよう。 7 Ways to Analyze a Customer-Journey Map by Kim Salazar on March 22, 2020 日本語版2021年1月20日公開 カスタマージャーニーマップは、ペルソナセグメントが目標を達成するために経験するプロセスを可視化したインフォグラフィックだ。ジャーニーマップは、顧客が時間の経過とともにどのように目標に取り組むのかを理解するために実施する長期的な調査によって発見される物語やテーマ全体を伝えるのに有用である。 このジャーニーマップでは、新しい自動車を調べて、試乗し、購入すると
Slideflow | パワーポイントで作るwebサイト制作ツール
アップロード後ワンクリックで公開！PowerPoint or GoogleSlidesをアップロードすると、30秒程度でwebサイトへの変換が完了します。アップロードが完了すれば、ワンクリックでwebサイトの公開が可能です。 ソースコード書き出しで柔軟な開発も可能！アップロードしたwebサイトは、ソースコードを書き出して、Slideflowのプラットフォームに縛られない開発が可能です。ソースコード書き出しをしておけば、Slideflow解約後でも自社サーバーにアップロードし直すなど、柔軟な運用することが可能です。
Webディレクターのスキルツリー - 二宮日記
Webディレクター解体アドベントカレンダー初日の記事です。今日はWebディレクターという職種を定義するために作ったRPG風のスキルツリーとその活用方法を紹介します。あとは関連する他の開発メンバーとお互いの担当範囲を明確にする方法や、スキルツリーをスキルアップに役立てる方法について書きます。 曖昧な仕事 Webディレクターという職種に期待される仕事の内容は、開発に関わる他の職種と比べても非常に曖昧です。そもそも何ですか、ディレクションって。英語を直訳すると方向とか指示とかそういう意味ですけど、概念的でふわっとしています。 ディレクションという仕事に含まれる範囲も様々です。受託でホームページ制作を請け負って進行管理をメインに行うWebディレクターもいれば、既存自社サービスの売上増に責任を負う人も、新サービスの立ち上げに挑戦する人もいて、同じディレクターという名前でもやっている仕事が全然違います
ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ
この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト
フリー素材：無料の写真画像・イラスト・動画素材 | Adobe Stock
Adobe Stock のコレクションには 3 億点以上の素材がそろっています無料で試す Adobe Stock のコレクションには 3 億点以上の素材がそろっています無料で試す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのデザインパターン
Screen Sizes
チャットボットのシナリオとは？AI型との違いと設計前のポイント