UXデザインのペルソナ作成にクラスタリング技術を使った | 株式会社ヌーラボ(Nulab inc.)
こんにちは。ヌーラボの開発者の藤田です。今回は、とある機能のUXデザインの際、クラスタリング技術を応用してペルソナを作ったので、やり方をご紹介します。Pythonでクラスタリングを行うサンプルコード付きです。 ペルソナ法について UXデザインの一環として、ユーザーが実際にどう考え、どう行動するかのストーリーを作るというワークがあります。 この時、ターゲットユーザー集合の中にいると思われる架空の人物の社会的属性、志向性、嗜好などを細かく設定した「ペルソナ」を作っておいて、「自分だったらこう考えてこうする」ではなく「このペルソナの○○さんだったらこう考えてこうするはず」という行動を積み上げてストーリーを作るのがペルソナ法です。 参考：ヌーラボスタッフに聞いた！おすすめテンプレートをご紹介 | Cacooブログ ペルソナ法の効用 よく言われている通り、ペルソナ法には様々なメリットがあります。 一
はじめようアクセシビリティ改善！Backlogで行っている取り組みをご紹介 | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Backlogチームの中川です。 本記事では、Backlogが最近おこなっているスクリーンリーダー向けアクセシビリティ改善の取り組みを元に、明日から、いや、今開いてる画面からでも始められるアクセシビリティ改善についてご紹介します。 ちなみに、スクリーンリーダーって何？という方のために簡単にご説明しますと、スクリーンリーダーとは、視覚障がいを持つ方がPCを操作するのに使用する音声読み上げソフトです。無料で代表的なものは、Windows では NVDA、Mac では標準搭載されている VoiceOver などがあります。Backlogの改善では主にNVDAを使用して確認作業を行っています。 すぐにでも始められる作業コストが少ない改善 見出しをちゃんとマークアップする スクリーンリーダーではコンテンツ間を移動するのに、見出しを手がかりにすることが多いので、見た目の文字サイズではなく文
Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 | 株式会社ヌーラボ(Nulab inc.)
Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 YewはRustで書かれたフロントエンド向けのフレームワークです。 書かれたコードはWebAssemblyに変換されて、ブラウザ上で実行することができます。プロジェクトのREADMEに「ElmとReactに影響を受けた」と書かれているように、JSX風のHTMLを書けるようなマクロが用意されていて、Rustのコード内にHTMLっぽく表現でビューを書くことができます。 また、Elmアーキテクチャのように、モデルとビューがあり、メッセージによって状態の更新がされるようになっています。 というわけで、以前、このブログでsakiが書いた「Vue.js でかんばんライクなタスク管理アプリを作ってみました。」という記事を参考に、見ためがほとんど同じようなかんばんライクなタスク管理アプリ (タスクボード
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
Backlogの改善でわかった A/Bテスト を失敗に導くアンチパターン5選 | 株式会社ヌーラボ(Nulab inc.)
※ 数字は仮のものですが、改善率は実際の結果と大体合わせてあります。 これらの結果から「基本的ではない機能を持つアイコンにラベルを合わせて表示すると、ユーザーの使用率が上がる可能性がある」ということがわかりました。特にウォッチ機能と編集機能の改善率の差にわかりやすく出ていますね。 現在はこの結果や更なるA/Bテストを基にしながら、他の画面の改善も進めています。 A/Bテストを失敗に導くアンチパターン 結局どっちがいいの？ A/Bテストサイコー！ なんでもいいからA/Bテストしたいぞ！ ……と言いたいところですが、実際はそう簡単ではありませんでした。やってみて初めて気付いたり、改めて実感した知見から、A/Bテストを失敗に導くアンチパターンをいくつか共有します。 アンチパターン 1: 仮説を設定しない 仮説は、テスト内容を決めたり、結果を評価する際の判断基準になります。テストを行う前に仮説を設
Webエンジニアだったら当然知っておきたい「 クリックジャッキング対策 」とは？ | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if
続・目指すのはぶっちぎりの速さ! HTML5版 Cacoo で刷新されたデータアーキテクチャを紐解く | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Cacooの平山です。現在、僕たち Cacoo チームは脱Flash・ HTML5 化に向けて最終の追い込みの真っ最中です。そんな中ではありますが、前回の「ぶっちぎり」記事では、HTML5化に向けた描画技術としてSVGを選択したことをお伝えしました。今回は、HTML5版のもうひとつの改善ポイント「データ面での刷新」を紹介したいと思います。 Cacoo のデータ形式や構造の刷新・JSONフォーマットへの移行 HTML5版では、描画にSVGを採用するという変更だけではなく、抜本的なデータ形式や構造の刷新も行いました。これには以下3点の理由があります。 Flash版ではAMFというFlashに特化したデータフォーマットを採用している 図に含まれるデータ量に応じて、パフォーマンスが低下しやすい構造である サーバー内でデータを処理しにくい 1点目はFlashから脱却するにあたり対応必須な
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
サルでもわかる「サルでもわかるプロジェクト管理入門」の作り方 | 株式会社ヌーラボ(Nulab inc.)
プロジェクト全体としては、弊社CTOの縣を含めた相談役とディスカッションしながら、以下の流れで進めていきました。 記事の構成を固める 記事の執筆とサイトの構築 フィードバックを受けてブラッシュアップ リリース このプロジェクトの目的と、その為に技術が貢献できること このプロジェクトは、プロジェクト管理について読者にわかりやすく伝えることが第一の目的でした。 そのためには記事の内容とそれを適切に伝えるサイトデザインが重要です。しかし一つのサイトを作るには細かいマークアップやインフラの調整など、コンテンツ作成以外の作業も多いもの。このプロジェクトでは記事の執筆だけをするメンバーはいません。 コンテンツの作成に集中できる体制を作ることが、目的に対して技術面から最も貢献できることでした。 貢献したこと1: Markdownでマークアップの手間を減らす まず最初に記事はMarkdown形式で執筆する
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
僕がお話しているプロジェクト管理とチームの作り方などについて | 株式会社ヌーラボ(Nulab inc.)
2015年3月25日に、株式会社ロフトワークさま主催の『ビジネスを躍進させる創造的チームの作り方』にて、千葉県の柏にある柏の葉オープンイノベーションラボ（KOIL）にて、「小さなままで世界を相手に冒険できる自己組織化したチーム」というタイトルでお話をさせていただきました。また、最近ではないですが、2012年9月には、Movida School にて「スタートアップは自己組織型であるべき」といったタイトルでスタートアップの起業家に向けてお話させていただきました。 いづれも、「チームの作り方」に触れるような内容でした。 また、同様の内容で、台湾のお客様の社内セミナーや、その他多くの場所でお話させて頂いてます。 自分自身もまだまだ勉強中だということもありますが、このような題材は、「こうすることが正解」というケースは無いと思います。なので、いずれも「会社の文化や、背景、業務内容などにあわせて、良さ
NUCON 資料を公開しました！ | 株式会社ヌーラボ(Nulab inc.)
昨日は雪が舞う悪天候にも関わらず、大勢の方に NUCON にお越し頂きました。みなさま本当にありがとうございました！ 基調講演は元より各セッションも大盛況で、「どのセッションを見ればよいか悩んだ」「見れなかったほうのセッションの資料をみたい」といったお声もいただきましたので、以下に資料を公開いたしました。 テクニカルトラック 開発者がかたるヌーラボのコラボレーションサービス API 最前線 ( ヌーラボ 染田貴志、中原正二、後藤幸 ) 職人任せにしないインフラ構築/運用 ~ DevOps時代を生きぬくために ~ ( ヌーラボ 中村知成 ) 今どきのリアルタイムコラボレーションツールの作り方〜Backlog、Cacoo、Typetalkにおける実践例〜 ( ヌーラボ 縣俊貴 ) ジェネラルトラック ヌーラボサービスの利用事例 – Backlogを使ったオフショア開発 ( EVERRISE 古
ガントチャート上でドラッグ＆ドロップでタスクの並び替えられるようにしてほしい – Customer Feedback for Backlog
ベトナムにおけるBacklog活用のリアル ベトナムにおけるBacklog活用のリアル backlog Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること backlog 2023年最も素晴らしいプロジェクトを表彰！Good Project Awardを開催しました 2023年最も素晴らしいプロジェクトを表彰！Good Project Awardを開催しました backlog Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 backlog 創業からもうすぐ80年の老舗企業！ミートボールでおなじみの石井食品様で、プロジェクト
「どうすれば価値を生み出すか」を知るためにヌーラボ で行っていること | 株式会社ヌーラボ(Nulab inc.)
このエントリは 達人出版会から昨年出版された電子書籍「開発現場に伝えたい10のこと」のうち、私がヌーラボの開発の進め方について紹介させていただいた章を出版社の許可を得て転記したものです。その他の章も関西を中心に活躍しているエンジニアの経験にもとづく知見にあふれたものになっておりますので、本エントリを読んで興味をもたれたらお手に取って頂ければ幸いです。 では、少し長文になりますがおつきあいください。はじまりはじまり！ 「どうすれば価値を生み出すか」を知るためにヌーラボで行っていること 私が所属する株式会社ヌーラボは20名ほどの小さなソフトウェア開発会社です。私たちが自社で開発、運営しているウェブサービスには以下があります。 プロジェクト管理ツール Backlog オンラインドローツール Cacoo これらのサービスは、国内だけでなく海外でも沢山のユーザに利用いただき「使いやすい、楽しい」とい
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
