ChatGPTにペルソナを作ってもらったら完成度が高かった | DevelopersIO
ChatGPTに共有するインタビュー内容について インタビューは1年前、社内のPM、PdM、エンジニアの方など計10名程にお話を伺いました。インタビューの経緯や詳細を知りたい方はこちらのブログをご覧ください。 インタビューのテーマはクラメソのデザイナー像（現状や理想）についてです。事前に質問を準備しましたが、半構造化インタビューの形式を取っていたことやインタビュアーと書記はチームの各メンバーがランダムに行っていたことがあり、人によって質問や解答の項目が異なります。ChatGPTが認識しやすくなるように項目を揃えることも考えましたが、あえて多少バラつきのある項目でも対応できるのか興味があったので、項目も文体もそのままで共有します。ただし具体的な案件名やメンバーの氏名、クラスメソッドという弊社名に至る固有名詞まで全てイニシャルに置き換えておきます。 また、今回はニールセン博士の理論に基づき、5
仕事の文章はもうChatGPTに任せたい | DevelopersIO
本来、エンジニアであれば実装の能力、デザイナーであればデザインの能力があればいい。 しかし仕事はチームで動くことがほとんどなので、こうした「専門的な力」にプラスして、コミュニケーション能力のような「普遍的な力」が求められる。これは、ポータブルスキル、ソフトスキルなどとも言われるものと同一である。 この「普遍的な力」の一つに、文章力がある。デジタルを活用しようとすると、メールやチャットなど、仕事の中で文章を書く機会は明らかに増える。リモートワークは文章が下手な人には不利な環境だ、という人もいるが、デジタル活用力と文章力は密接な関係にあることを示した発言だと思う。 ブログやソーシャルメディアによって、文章力がある人は、より一層、自分の価値を高めることができるようになった。 10の専門力+1の文章力で構成された人より、6の専門力+8の文章力で構成された人の方が、高く評価され、市場価値が高まり、い
Webサイトの動き続ける画像や動画、カルーセルのデザインをよりよくする | DevelopersIO
新しく公開されるWebサイトに、動きのあるものが増えてきました。このような目を引くデザインは、視覚的な効果はありそうですが、困るユーザーもおられるようです。より良いデザインにする方法を考えます。 動きのあるWebサイトとは ここで取り上げる「動きのあるWebサイト」には、たとえば次のようなものがあります。 Webサイトのトップページなどで、ずっと動き続ける画像がある Webサイトの背景が動画になっていて、それを停止する手段がない。スクロールしないとコンテンツが表示されない Webサイトのトップページなどで、主要なコンテンツへのリンクが画像になっていて、見ていると画像が次々と入れ替わる(いわゆるカルーセル) 電光掲示板のように、文字がずっと流れ続ける 以下、それぞれの具体例をご説明します。具体例のサンプルページは動くWebデザインアイデア帳へリンクさせていただいています。 1. Webサイト
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた | DevelopersIO
はじめに スマホアプリやWebアプリで、ボタンなどのUIを作る場合を考えます。例えばボタンの色と、その上の"OK"などのテキストの色を決める際に注意すべき点を紹介します。UIだけでなく、ドキュメントの図やプレゼン資料など、色を使う全ての場面に使えます。 例えば、スマホアプリに次のようなボタンがあるとします。 こういう配色のボタン、よく見ますよね。ところが、このボタンは背景の黄緑色と「今すぐ購入」のフォントの白の「コントラスト比」が低い、つまり「色の明るさの差」が少ないので、「文字が薄くて読めない」と感じるユーザーが存在します。 人間の色の感じ方はみな同じではなく、遺伝子の状況や疾患などによって異なります。例えば、正常とされる人とは異なった色に見えたり感じたりする「先天性色覚異常」は、日本人男性の20人に１人(5%)、日本人女性の500人に1人(0.2%)といわれており、男性ではAB型の血液
Tableau Desktopでユーザーフィルターを設定して、見る人によって違うデータが表示されるようにする #tableau | DevelopersIO
はじめに こんにちは。大阪オフィス唯一のDI部メンバー、tamaです。 今回はTableauのユーザーフィルターという機能についてご紹介します。（本エントリも、最初はTableau Server認定資格絡みのシリーズとして書こうと思ってたのですが、どうも試験ガイドに記載が無いっぽいので、通常シリーズとして投下します。） ユーザーフィルターとは？ その会社（または部署）にとって大事なデータを扱ったワークブック（ビュー）は、閲覧できる人を制限したいですよね。Tableau Desktopだけであれば、.twbxファイルを、アクセスが限られた共有フォルダに置く等で対応できます。Tableau Serverを導入していれば、その豊富な権限設定で、アクセスを非常に柔軟に設定することができます。 しかし、上記はワークブック（ビュー）そのものに対してのセキュリティです。 ユーザーによっては、このようなニ
WebサイトのGDPR対応用パッケージを作ったので、GDPR準拠のランディングページを作ってみた | DevelopersIO
GDPRの施行が迫る中、いくつかの著名サービスがGDPRの趣旨を正しくとらえずに回避する手法で不誠実に対応していると批判されています。 例えばTwitterは、広くソーシャルログインを提供しているにも関わらずユーザーのローカルストレージの使用に選択権を与えず、複雑なプライバシーポリシー文書とともに「嫌なら見るな」「見ているということは合意したことだ」という旧態然とした運用を行なっているためこの批判を浴びています。 ドイツおよびヨーロッパのデータ保護やセキュリティ標準を多く作り出してきた DSK: Datenschutzkonferenz は、今年4月にWebトラッキングはオプトアウトではなく明確にオプトインで実装せよと声明を出しています。 9. Es bedarf jedenfalls einer vorherigen Einwilligung beim Einsatz von Track
GoogleTagManagerでサイトに一定期間だけメッセージを表示しよう | DevelopersIO
もう年末年始ですね。GW休暇や夏休みなど、一時的にサイトにメッセージを出したい時にオススメの方法です。すでにGoogleTagManager（以下、GTM）を導入している方向けの内容となっています。もう少し根本的な話はまた今度、ブログで書こうと思います。 新しいタグの作成 GTMにログインして、「新しいタグ」を選択します。 タグタイプに「カスタムHTML」を選択 タグには適当な名前を付けてください。今回は「Corp_年末年始2017メッセージ」としています。 「タグの設定」をクリックし、「カスタムHTML」を選択します。 カスタムHTMLの設定 HTMLに以下のコードを入力します。 （なお、サイトでjQueryを利用していない場合は動きません。） <script> $("iframe").before('<p class="temp-message">誠に勝手ながら、12月23日（土）〜1
今日から使える文章校正テクニック | DevelopersIO
渡辺です。 昨日のエントリーが結構反響大きめだったので、第二弾です。 文章校正をしていてよくあるパターンを幾つか抽出してみました。 ただし、前回紹介しているパターンは除外していますので、あわせて確認ください。 重複を減らす 文章校正の基礎は 重複を減らす ことです。 次の文章を見てみましょう。 AWSを使い慣れている人にとっては簡単な作業ですが、使い慣れていないと戸惑う所も多いところです。 この文章がくどく感じる理由は、「使い慣れている」が重複していることです。 前後関係もありますが「ところ」がなにを指しているのかも曖昧ですね。 後半の「使い慣れている」を削除し、バランスを取るために作業を後ろに移動しました。 さらに、前の文章を受けるため、「これは」を追加します。 これは、AWSを使い慣れている人にとっては簡単ですが、そうでないと戸惑う作業です。 スッキリしました。 しかし、「慣れていると
AWS再入門 Amazon S3編 | DevelopersIO
当エントリはDevelopers.IOで弊社AWSチームによる2015年アドベントカレンダー『AWS サービス別 再入門アドベントカレンダー 2015』の1日目のエントリです。 このアドベントカレンダーの企画は、普段AWSサービスについて最新のネタ・深い/細かいテーマを主に書き連ねてきたメンバーの手によって、 今一度初心に返って、基本的な部分を見つめ直してみよう、解説してみようというコンセプトが含まれています。 AWSをこれから学ぼう！という方にとっては文字通りの入門記事として、またすでにAWSを活用されている方にとってもAWSサービスの再発見や2015年のサービスアップデートのキャッチアップの場となればと考えておりますので、最後までお付合い頂ければ幸いです。 では、さっそくいってみましょう。1日目のテーマは『Amazon S3』です。 Amazon S3とは AWSの中核にあるストレージ
次世代のユーザー行動分析サービス「Repro」を使おう！ | DevelopersIO
次世代のユーザー行動分析サービス「Repro」 こんにちは！最近は MBaaS を勉強している荒川です。 今回は iOS でユーザーの行動記録が行えるReproの紹介を致します。 Repro のドキュメントを参考に実際に実装してみます。 Reproを知る Reproとは ReproはiOSアプリに画面録画機能とユーザー行動の記録機能を提供し、アプリの導入とユーザーの定着を支援するためのサービスです。 Reproの仕組み Repro iOS SDKをアプリに組み込むと、アプリの起動と同時にReproのセッションがスタートします。 アプリがバックグラウンドに移行したタイミングで、SDKが録画した動画と収集したイベント情報を自動的にReproのサーバに送信します。その後、ReproのWebサイトでユーザーの行動を確認することができるようになります。 ユーザー行動の分析 ページが表示された、購入ボ
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
Macでmodern.IEとVMWareを使ってInternet Explorerのテスト環境を構築してみる | DevelopersIO
Internet Explorerのテストって手間ですよね。 そもそも古いInternet Explorer（6-8）には対応したくないものですが、そうも言っていられないのが普通で嫌々対応することになると思います。IE8以上にあるF12開発者ツールやIE Testerなんてありますが、今回は少し前から話題になっていたInternet Explorerの実行環境を仮想マシンとして作れるmodern.IEを使ってみることにしました。 今回はMacOSのVMWareを前提として紹介します。 VMWare Fusionとは VMware Fusion 5 は、Mac 上で Windows プログラムを実行するための、ホーム ユーザーに最適な、迅速、容易、かつ信頼性に優れたソリューションです。 VMware Fusion VMWare Fusionの良いところ 私自身もつい最近使い始めたもので詳しく
レスポンシブデザインの簡単な確認方法 | DevelopersIO
レスポンシブデザインのテストツール Webサイトへアクセスするデバイスは、スマートフォン、タブレット、PCなど、非常に多様化してきており、 レスポンシブWebデザインが重要になってきています。 対応デバイスが増えるということは、それに伴ってテストも大変になるということです。 そこで今回は、Webサイト作成の際に「iPad２だとどう見えるんだろう」といったケースで簡単に確認できるツール、 designmodo.com/responsive-testを紹介します。 使い方は簡単です。ここへアクセスし、 画面上部のテキストボックスに、対象のURLを記述しましょう。(http://localhostとかでもOK) そして、画面右のドロップダウンメニューから「iPad」とか「15" Macbook Pro」とかの対象デバイスを選択すれば、 そのデバイスでどう見えるか確認することができます。 また、確
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成した匠顔フォントはこちら Creeperフォントをダウンロード 1，Webフォントについて 少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。 一部抜き出して紹介します。 1.1，Webフォントとは CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォン
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた | DevelopersIO
ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた GitLab とは GitLab は Git リポジトリを簡単に管理できるツール Gitolite をブラウザから管理できるようにする Ruby アプリケーションです。 GitHub のオープンソースクローンと呼ばれることから分かるように、UI が GitHub とめっちゃ似ています。 GitHub みたいなサービスを使いたい！だけど Public はアレだなということもあると思います。そんなときに便利です。 社内 GitHub として使うケースが主なユースケースだと思います。 しかもすべてローカルだけで作ることができるので、ローカルマシンにインストールすれば、構築後はネットワークなしで GitHub 的な環境を使うことができます！ そんな GitLab を Mac
HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく | DevelopersIO
そんな訳で、jQuery UI プラグイン(※以下、jQuery UI Widget) の作り方について学んだので、ここに書き記しておくとします。忘れっぽい自分のための備忘録として書いた内容なので、割りと基礎的な部分にフォーカスした入門編のような内容になっています。 ウィジェット作成のための前準備 当然ですが jQuery UI のプラグインなのだから、作成には jQuery エンジンだけでなくjQuery UI ライブラリが必要となります。 手順A | CDN で手軽にロードする 学習目的やちょっとしたテクニカル調査といった場合は、わざわざファイルをダウンロードするのも大げさなので、CDN (コンテンツ・デリバリ・ネットワーク)を利用させてもらうのが妥当です。 jQuery UI オフィシャルページのフッター部分に必要なURLがすべて記載されているので、これらをアナタが作成する HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色覚多様性(色覚異常)の見え方を Chrome DevTools でシミュレーションする | DevelopersIO
