Regional Scrum Gathering Tokyo2023 の中の moyiyuya さんの「私考える人、あなた作業する人」というセッションが大きな反響を呼んでいました。 スクラムを導入してチームとして一体感をもってプロダクト開発をよりうまくやっていきたかったはずなのに、いつの間にか「私考える人、あなた作業する人」という関係性ができてしまっていた、という相談を受けることがあります。 なぜこのような「私考える人、あなた作業する人」という関係性が生まれてしまうかについて、コミュニケーションの観点で考えてみます。 プロダクトオーナーと開発者の堺目 「私考える人、あなた作業する人」のような関係性が生まれてしまっているチームでは、開発者からプロダクトオーナーに対するコミュニケーションが以下のようになっていることが多いです。 プロダクトバックログを出してくれたらつくります 仕様を決めてくれた
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
Webサイトの構造を可視化！簡単にビジュアルサイトマップが作れる「Octopus.do」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトの構造を可視化して直感的に理解しやすい「ビジュアルサイトマップ」を作成できるWebサービスをご紹介します。 ブラウザからGUIベースのエディタにアクセスするだけで誰でも利用可能で、すべてマウス操作でできるので初心者でも簡単に使いこなせます。ブロックを追加していくだけでサイトマップに簡易的なワイヤーフレームが挿入できる点がとても便利です。 また、既存のWebサイトから素早くサイトマップに変換する方法も合わせて解説しているので、ご興味のある方はぜひ参考にしてみてください！ 【 Octopus.do 】 ■「Octopus.do」の使い方 それでは、「Octopus.do」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら【Create sitemap】ボタンをクリックします。 すると「サイトマップエディタ
UIUX デザイナーと仕事をする際にプロダクトマネージャーとして持っておきたい 8 つのマインドセット｜Fritz | Lead Product Manager @ Mercari
2020 年に入り、メルカリ US ではプロジェクトの担当 PDM を検討する際に「UIUX に大きな変更が入るならこの人」「関係者マネジメントが重要ならあの人」「テクニカルな知識が要求されるならこの人」といった具合に、プロダクトマネージャーそれぞれの特性・得意分野を考慮したうえで決定する傾向が以前にも増して強くなりました。 その結果、自分（フリッツ と申します、こんにちは）の場合は UIUX 改善を中心としたプロジェクトが相当に増え、並行して 3-4 名の UIUX デザイナーとそれぞれのプロジェクトについて議論することが毎日の風景となりました（めっちゃくちゃ楽しい）。 こうした状況下にあって、あらためて デザイナーと UIUX について議論・もしくはフィードバックをする際に気をつけている・気をつけたいことについて前後編にわけて振り返りをしたので共有してみたいと思います： ・前編（この記
コロナ禍に「サウナの混雑表示システム」を一晩で 元エンジニアの番頭が手掛ける「アジャイル銭湯」 | i:Engineer(アイエンジニア)｜パーソルクロステクノロジー
「世の中のITエンジニアはエンジニアだらけのコミュニティにいることで、自分の技術がどれだけ他業界ではハイスペックなのか気づけていないと思うんです。もったいない」 そう話すのは、東京・大崎の銭湯「金春湯（こんぱるゆ）」の経営者、角屋文隆さん。9年間務めた大手メーカーのエンジニア職を辞め、1年前に実家の銭湯の経営者となった、業界には珍しい“エンジニアの番頭”さんです。 金春湯はもともと利用者のデータをまったくとっていませんでしたが、角屋さんは“金春湯専用システム”をイチから開発し、客層や混雑の時間帯を数値化。ほかにも公式サイトを改修したりWebショップを展開したりと、創業70年となる老舗の実家にIT革命をもたらしています。斜陽産業から抜け出しきれない業界のなかで、売上は１年で7割増える結果となりました。 「でも、自分が使った技術は新人研修で学べるレベルなんです」という角屋さん。エンジニア時代に
新規開発を始めるときにやるべきこと
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R
■イベント 急成長するSaaSを支えるエンジニア成長支援の取り組み https://sansan.connpass.com/event/293441/ ■登壇概要 タイトル：エンジニアの成長に向き合う評価と目標設定 登壇者：技術本部 Bill One Engineering Unit ⽊村 祐也 ■Bill One エンジニア 採用情報 https://media.sansan-engineering.com/billone-engineer
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
2019年はコンテンツマーケティング関連のイベントでお話しする機会が何度かあり、その中でたくさんの質問をいただいたのですが、すべての質問にお答えすることができませんでした。 そこで改めてこの場を借り、質問に回答させていただこうと思います。私の経験則にもとづくものも多いですが、参考情報としてご覧いただければ幸いです。 目的・意義・戦略 Q1. オウンドメディアの重要性を経営層に理解してもらうにはどうすればいいですか？ いわゆるオウンドメディアについては、成果が出るまでに時間がかかることが多く、必ず成功すると事前に言い切れません。 そのため、経営者や事業責任者が、オウンドメディアの力をそもそも信じているということは、推進する上での重要なポイントになります。逆に、否定的な人を説得して始めるのはなかなか難しい施策ともいえます。 こういった前提があった上での回答ですが、オウンドメディアの目的を、一つ
ご無沙汰しております。11月6日に、CNAMEレコードを使って付与された1st-party cookieの規制機能を搭載したiOS14.2がリリースされましたので、その内容をまとめます。いつものことですがマーケティングよりブラウザの細かい話です。正式発表前なので誤りの可能性がありますがご了承またはご指摘ください。 規制の仕組みまず規制されるのは、AppleのWebKitエンジニアJohn Wilanderさん（ITPの発明家）が「Third-party CNAME cloaking」として定義するものです。 Third-party CNAME cloaking means a first-party subdomain resolves to a third-party domain which does not match the resolution for the top frame
Tableauによる最新版『可視化ベストプラクティス』〜Tableau Blueprint〜 #tableau | DevelopersIO
先日のブログでも紹介しましたTableau社によるベスト・プラクティス集『Tableau Blueprint』。 当エントリでは、その中から『可視化』の部分にフォーカスを当てたトピック『Visual Best Practices』に関してその内容をまとめて見たいと思います。 Visual Best Practices - Tableau 目次 はじめに ユーザー視点に立って考える コンテキスト 適切なチャートの選択 レイアウト 配色 タイトルと字幕 ツールチップ フォント ダッシュボードのサイズ ダッシュボードに対話性を持たせる パフォーマンス設計 まとめ はじめに ダッシュボードの究極的なゴールは『ユーザーが答えを簡単に導き出すことが出来る』ことと言えるでしょう。如何に見栄えの良い、美しいダッシュボードが出来たとしてもユーザーがそれを使って洞察を得て答えを見つける事が出来なければ何の役に
このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ
1. アジャイルについて マネージャーが知るべき 97 のこと 株式会社アトラクタ 取締役CTOアジャイルコーチ 吉羽龍太郎 (@ryuzee) 2. イントロダクション 吉羽龍太郎 / YOSHIBA RYUTARO ▸ アジャイル開発、DevOps、クラウドコンピューティング、 インフラ構築自動化、、組織改革を中心にオンサイトでの コンサルティングとトレーニングを提供。著書訳書多数 2
広告に携わる全ての人へ、どうか、「炎上するからやめておこう」と思わないでほしい。｜KEITA MAKINO | DE Inc.｜note
炎上に関して新たに書くことは、できる限りしたくないと思っていました。関わった人たちだって十分に悩み考えているだろうし、少なくともそのカサブタをはがすような行為はしたくないと考えています。 ただ最近の「カネボウ」と「ロリエ」の流れをみて、どうしても書いておきたいことがでてきてしまいました。それはタイトルの通りなのですが「炎上するから」というような理由で、企業やブランドがメッセージを発信することをやめてしまうのではないか、という懸念が大きくなったからです。 まずこの「カネボウ」と「ロリエ」の広告がとても残念だと思ったのは、「本当に伝えたかったこと」とまったく別の印象と解釈を与えてしまう広告になっていたという点です。どちらもプロジェクトや思想そのものは、とてもすばらしいものだったと今も思います。 カネボウは、第一弾から観てもらえればわかると思うのですが、「それぞれの個の化粧の自由」やその価値を追
業界特性だからと諦めてしまうことなかれ。これは「ひとえにマーケティング不足」だと枌谷氏は言う。 企業相手の仕事なら、企業ならではの作法に従うべきというのが、BtoBマーケティングの根底にある考え方。それによって、上に挙げたような問題は起こりにくくなり、場合によっては解消するという。 BtoBマーケティング自体は非常に濃密なテーマだが、25分の限られたセッションということで、すぐに理解できるであろう以下の7点に話をしぼって、枌谷氏はポイントを紹介した。 BtoBとBtoCの違いを知ろう購買プロセスを把握しようBANT条件を決めよう言葉を磨こう課題買い掛けのストーリーを作ろう自社サイトをうまく活かそう情報発信を積極的に行おう1. BtoBとBtoCの違いを知ろう「BtoBといっても相手は人だから、人の気持ちを動かすという意味では同じだろう、というのは乱暴な意見」だと枌谷氏は言う。先に挙げた7つ
予算の少ないWebサイト制作は失敗する？Webサイト制作の実態調査 ｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL
Webサイトの新規立ち上げ・リニューアルは、そのほとんどがコンバージョン数の増加や企業/サービスイメージの向上などを目的に実施される。今回は、アンケート調査によってWebサイト制作で成果を出している“発注者”の共通点を探った。
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
フロントエンド開発の準備
開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限り開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対応する予定はなかったけど、後から必要になってしまった場合は仕方ないと思います。 OGPの必要性 動的ルーティングに対するOGPの必要性によってレンダリング方法の選定やCDN周りの選定が変わってきます。 SEOのニーズ こちらもOGP同様レンダリング方法に影響します。 OGPに関しては後からなんとかなることもありますが、SEOが重要なサイトの場合、そもそもSPAを選択しない方が適している可能性もあるので重要です。 対応ブラウザ/バージョン これを明確にしないと、一部のブラウザで使用できないCS
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ | 東京フリーランス
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！2019.08.26特集 HOME特集制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ こんにちは！Webエンジニアのショーヘーです。 「今はWeb業界の景気がいい！」と言われますが、その分競争が激しくなったことで経営に苦しむ企業も増えています。 どんどん価格競争が激しくなっているため、原価ギリギリで引き受けている企業もあるくらいです。 そんな苦しいWeb業界にありながら、平均月給41.8万円、残業ゼロを実現している超優良Web制作企業が沖縄にあります。沖縄では月給20万を下回ることも珍しくない中、これはとんでもないことです。 その企業の名前は、琉球
常々GitHubにtag requestが欲しいと言ってきましたが、それを実現するツールを作りました。OSSなど、バージョニングとリリースが伴うソフトウェア開発のリリースエンジニアリングをとにかく楽にしたいという動機です。既に自分が管理している幾つかのOSSでは導入して便利に利用しています。 https://github.com/Songmu/tagpr アイデア 基本の発想は以下のようにシンプルです。 リリース用のpull requestがGitHub Actionsで自動で作られる バージョン番号が書かれたファイルやCHANGELOG.mdを自動更新 そのpull requestをマージするとマージコミットに自動でバージョンtagが打たれる semver前提 リリース用のpull requestを自動で作りマージボタンを以てリリースと為す、というのは、みんな(僕が)大好き git-pr
社内に古いInternet Explorer（IE）専用Webページ／アプリが残っていたり、自治体などのIEしか対応していないWebサイトへアクセスが必要であったりするせいで、いまだにIEの利用が強いられている。しかも、IEでは利用できないネットサービスが増えていて、他のWebブラウザと併用せざるを得ず、面倒だ……。 さらに、2022年6月にはブラウザとしてのIEのサポートが終了し、IEが起動できなくなるとのこと。このままでは、IE専用のWebページ／アプリを使い続けられなくなる。かといって、IE以外のブラウザでも利用できるようにサーバ側のシステムを改修するのは到底間に合わない……。 このような場合、Chromiumベースの「Microsoft Edge（以下、Edge）」への移行を検討してみるとよい。「IEモード」という、EdgeのタブでIE専用のWebページ／アプリをシームレスに表示で
ヒアリングに行くのではない。最初から価値を与えること。これは、プロジェクトの初期対応でデザイナーが取るべき基本的な態度です。 今回のテーマは、デザインの初期対応。その効果的な動き方を紹介します。 デザインプロジェクトのスタートは、他者から依頼を受ける場合と、デザイナー側から提案を始める場合の２つのパターンがありますが、今回はそのうちの「デザイナーが依頼を受けるパターン」について。 初期対応の時点で、デザインの成果の半分は決まってしまいます。それくらい重要なものですが、なせかデザインの世界ではあまり論点化されていません。自分の経験が何かの役に立てばとの期待を込めて。どうぞ。 ヒアリングじゃない。ディスカッションだ。依頼や問い合わせを受けてデザイナーが初期対応すること。これをヒアリングと呼ぶこともありますが、それには注意が必要です。 最初に関係性が固定されるヒアリングに行く。情報を聴きに行く。
ミスが多い人は “振り返り” が足りてない。「自己モニタリング」でミスが減るか8日間検証してみた - STUDY HACKER（スタディーハッカー）｜社会人の勉強法＆英語学習
自分を観察し、記録するだけで、ミスが大幅に減ることをご存じですか？ いわゆる「自己モニタリング」と呼ばれるものです。勉強・仕事のパフォーマンス向上や、問題解決力アップにもつながるのだとか。うっかりミスの多い筆者も試してみました。 自己モニタリングでミスを減らした医師 米国先端政策研究所シニアフェローのアーリック・ボーザー氏は、著書のなかでモニタリングの効果を伝えるべく、トロント在住の脳外科医であるマーク・バーンスタイン氏の例を挙げています。 バーンスタイン氏は、手術中に起こった自分もしくはチームメンバーのミスを、10年間にわたって記録していたそう。チームをモニタリング（観察）したわけです。 たとえばチューブが落っこちた、スポンジを置いた場所が悪かった、メスが床に落ちた、縫合部がうまく癒着しなかった、麻酔の投与が遅れた、看護師と行き違いがあったなど、とにかくミスと思われるものはすべて書き出し
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン ウェブデザイナーが作った成果物に対して、満足はしていないのだけどうまく言語化できなくてどうやって指示したらいいか分からない、あるいはクライアントからのフィードバックをどう咀嚼して伝えていいか分からない、結果的にデザイナーを上手くディレクションできていない.......。そんなお悩みをもったウェブディレクターいませんか？ ここでは実際のデザインを見た時に感じること・あるいはクライアントが指摘しがちなことについての「あるある」を、15の事例に集約してまとめてみました。デザイナーとコミュニケーションしてデザインをブラッシュアップする上での、ある種のアートディレクションの手引きとして活用してもらえればと思います。 1.「野暮ったい」と感じたら・言われたら。 「野暮ったい」とは
![[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎](https://cdn-ak-scissors.b.st-hatena.com/image/square/0aa50796295af9d9e533b4f2f4683522dbc45cd4/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F13031716%2Frectangle_large_type_2_0cfda3162d1aa8bb9571cecf5ec1f1e0.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません
最終更新日：2019年12月20日 どうも、ホットリンクCMOの飯髙です。 2019年12月16日に、弊社（ホットリンク）のコーポレートサイトをリニューアルしました。 このリニューアルは、BtoBに強いWeb制作会社である株式会社ベイジさんにお願いしました。目に見える変化はもちろん色々あると思いますが、ここでは見た目だけでは分からない、サイトリニューアルの検討プロセスや背景にある意図などを、ベイジさんが作ったサイト戦略資料を元に、詳しく解説していきたいと思います。 ※全スライドはページの最後に掲載しています。 ※当記事はベイジの枌谷さんとの共同制作です。 ※提案資料は提案当時のものをあまり変えず公開しています。古い情報や誤字脱字などが含まれているかもしれませんが、ご了承ください。 旧サイトの課題とベイジさんを選んだ理由 リニューアル前の私たちのコーポレートサイトには、主に以下のような問題が
GAFA他のトップデザイナーのPortfolioまとめ(2020年版)｜Masaki Iwabuchi, Speculative Vision Designer in NY
これまで、海外デザインスクール出願や、アメリカでの就職のために海外のデザイナーやパーソンズのクラスメイトのポートフォリオをまとめてきたが、早パーソンズ美術大学を卒業し、アメリカでの社会人キャリアが始まったので、今アメリカでトップとして認識されるサービスの企業（GAFA, Uber, Spotify.. etc）のUX/UIデザイナーのポートフォリオをまとめておく。 例えばFacebookのプロダクトデザイナーともなると、給料も平均で年俸2000万近くなり（+福利厚生）、ソフトウェアエンジニアと同程度の待遇となる。マネージャークラスは2000万〜もざらである。トップ企業で働くことは収入を安定させるほか、そこで行った何億人ものユーザーに向けたプロジェクトは、それ自体が非常に強い自分のブランディングツールとなり、次の転職にも有利に働く。 デザイナーのそういった高待遇を求める形で、美しいポートフォ
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
Strap（ストラップ）は、デザイン会社であるグッドパッチが開発した、日本製のオンラインホワイトボードです。チーム作業やコミュニケーションを効率化し、リモート環境・オンライン会議におけるコラボレーションの可能性を広げるアプリケーションです。
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！ こんにちは！ そして、初めまして！ 今年の6月より社内制作チームのデザイナーとして入社しました、えびちゃんと申します。LIGのデザインスクール「デジタルハリウッドSTUDIO by LIG」でWebデザインを学び、未経験でLIGに入社いたしました！ 社内制作チームでは、LIGブログの記事の一番上やサムネイルとして表示される画像（アイキャッチと呼んでいます）やバナーなど、社内で使用する制作物を作成しています。 私が入社して初めて作成したのは、「現役デザイナー厳選！デザインを勉強したい人におすすめの本23選」という記事のアイキャッチでした。このアイキャッチ制作には、デザイン初心者が陥る悩み・学びがたくさん詰まっていました。そこで、先輩デザイナーからフィードバックを受け完成するまでの過程を共有
UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率
日常生活において「なんでこんなデザインにしちゃったんだろう？」と感じることが意外と多い。 誰がどう見たって醜いルックス、どうしたって使いにくい操作性、非常に心地悪い体験、などなど。もっと良いデザイナーにデザインさせろよ！と思うかもしれない。でも、もしかしたら原因は他にある可能性も。 優秀なデザイナー ≠ 優れたアウトプット優れたデザイナーに頼めば、必ず優れたデザインをしてもらえるのか？答えはNo。むしろどんな優秀なデザイナーであっても、低いアウトプットのクオリティーが低いものになってしまうこともある。 そして、その理由はデザイナーのスキル以外にあったりする。これは、イコール優秀なデザイナーさえ雇えばクオリティーの高い結果が出るわけではないということでもある。 ■ 醜いデザインが生み出されてしまう主な理由■事前に十分なインプットが得られていない間違った期待値設定クライアントや担当者に対して間
先日、あるイベントで対談した若手スタートアップ起業家からこんな質問をされた。 「土屋さんは、なぜGoodpatchでコンサルのような仕事（受託）を続けようと思ったんですか？」 おそらくこの質問の背景として、出資を受けたら受託は止めて（もしくはVCに止められて）、自社サービスにフォーカスする会社がほとんどだし、スケールしないのに出資を受けているのになぜ受託を続けているんですか？という意味合いだろう。 昔はよく聞かれた気がするが最近はあまり聞かれる事がなかったのだけど、久しぶりに質問をされたので、それについてnoteに書いてみたいと思う。 ちなみにGoodpatchでは基本“受託”という言葉は禁止していて、クライアントワークもしくはデザインパートナー事業と呼ぶようにしている。理由は日本では受託という言葉が言われたものを作るだけの下請けのようなイメージになってしまっているから。 さて、出資を受け
デザイナーであれば一度や二度は言われたことのある「タダでやってくれませんか？」というセリフ。もしかしたらデザイナーでなくても、エンジニア、アーティスト、著名人などでも、同じ経験があるかもしれない。 もしくは、友人から「仕事請けたんだけど、支払ってくれるかわからないんだよね」と相談されたことがある人もいるかも。それらはクリエイティブ系に起こりやすい、いわゆる「これタダで問題」。 このリクエストは、サイトの制作や更新、ロゴデザイン、文章書き、翻訳、アドバイス、スピーチなどのいわゆる“手に職”を持つ人が受けることが多いと思われる。 なぜ “タダでやってくれる”と思ってしまうのか？技術のある人からの価値を得る。それなのになぜこのこのセリフがなくならないのか？逆の立場から考えてみると理解しやすいかもしれない。頼む方からすると、恐らく意外と“無邪気な”理由だったりすると思われる。 サクッと終わるよね？
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「私考える人、あなた作業する人」の関係をつくっているのはあなたかもしれない
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
UIは閲覧画面からつくろう。｜Shino | Software Designer
エンジニアの成長に向き合う評価と目標設定
1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
オウンドメディアに関する27の質問に2万字で回答します | knowledge / baigie
ITPのCNAMEクッキー規制について｜AD EBiS マーテック研究会
BtoBサイトを成功に導く180のチェックリスト | knowledge / baigie
アジャイルについてマネージャーが知るべき97のこと
BtoBマーケティングで絶対に知っておきたい7つの要諦――ベイジ枌谷氏が解説 | ウェブ解析士会議
サイトの表示高速化につながる18のこと | knowledge / baigie
リリース用のpull requestを自動作成し、マージされたら自動でタグを打つtagpr | おそらくはそれさえも平凡な日々
Edgeの「IEモード」を、サポートが終了するIE代わりに使う方法
ヒアリングを超えていく、デザインの初期対応｜大﨑 優｜CONCENT
登録フォームのテキストフィールドにはオフホワイトを
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
ウェブ・ユーザビリティの簡単9原則 | knowledge / baigie
ホットリンクのサイトリニューアル戦略資料を公開（8,000字の解説付）｜#ホットリンク
【特集】 無料で使える7つのビデオ会議サービスを徹底比較! ユーザー登録せずに会議参加が可能なものも
Strap（ストラップ） | 日本製オンラインホワイトボード
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
【デザイン初心者向け】初めてのアイキャッチ作成、先輩からのフィードバックをすべて公開します！
ソリッドとアウトライン、認識しやすいアイコンはどちら？
なぜ優秀なデザイナーでも酷いデザインを生み出してしまうのか？ デザイン会社 ビートラックス: ブログ
Goodpatchがクライアントワークを続ける理由｜Naofumi Tsuchiya / Goodpatch
“タダでやってくれませんか？” 問題への正しい対応方法 デザイン会社 ビートラックス: ブログ