ハローエブリワン、ジェイだ。 今週は真夏のような暑さがやってきた。俺にとっては神様からの最高のプレゼントをもらえたような気分だぜ。南国生まれの俺にとってこれくらいの気温がないと活動時間に影響がでるからな。まあ、気温で活動領域が決まるのは俺だけかもしれないが。 このくらいの暑さになると海を楽しみたくなるのが、人間として、いやクリーチャーとしての本能だろう。俺もさっそくサマー気分を満喫するために海に繰り出したいのだが、そう簡単に海にいけないのが現代人の悩みだ。 その悩みを解決するため、俺は仕事とファイティングをしながら、海を満喫出来る方法を試してみたんだ。それも自宅のベランダで。 用意したのは「さざ波」の音源と「ヘッドホン」あとは、「磯の香りがする海苔」と「扇風機」だ。扇風機に海苔をセッティングして、自然風にして俺にあてる！ 後はさざ波をヘッドホンで聴くだけだ。すごいアイデアだろう。俺はジーニ

Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、既存のWebサイトのグリッドレイアウト化などサポート的な役割になるかも。ライセンスはMIT。 Simple Grid

UI Interactionsはモバイル向けのUIをアニメーションGifで紹介しているデザインギャラリーです。カテゴリはシンプルにiOS/Androidのみといくつかのタグでカテゴライズされているシンプルな設計です。基本的にはdribbbleを中心にキュレーションしているみたいです。ざっと見る分には良さそうですね。 UI Interactions

はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo

やあ、エブリワン、ジェイだ。 晴れの日が続きすごく心地よい気持ちでブログを書いているよ。 みんなはこのゴールデンウィークをどのように過ごしただろうか。 明日から本格始動という人もいるんじゃないかな。俺たちドワンゴデザイナーも超会議というイベントの振替があり連休が続いていた。もちろん、この連休中もサービスを良くするために仕事をしているメンバーもいれば、勉強に勤しんでいるメンバーもいる。みんなユーザーが使ってくれるサービスを良くしようといつも考えているのさ。 俺はというと、もちろん普段できないデザインの勉強をしていたが、仕事がある日常では会えない人に会うことが多かった。 遠方にいる友だちや海外にいる家族、あとは普段忙しくてなかなか時間を頂けそうにない著名な方。人は人を通して成長するというが、様々な人と触れ合ってこの先どう生きていくかのヒントをもらえた。なんだか素敵なゴールデンウィークだったよ。

MarkDownDiagram Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。 こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った 特徴としては Webブラウザのみでローカルで動作 配置はマウスでドラッグして編集できる CSSで色や装飾を制御可能 といったあたりです。 githubからclone/ダウンロードして使えます。 オンラインで試すのはこちらでどうぞ。 ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。 Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。 機能 テキストでブロックを記述し、ブロック間を線で繋ぐ描画 ブロックをマウ

TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも

Outline MailはRWDなメールのHTMLフレームワークです。スマフォの普及で以前より需要が増している印象です。HTMLメールのRWD対応は通常のWebページとは少し勝手が違うのでこの手のフレームワークも触っておくと良いかもしれませんね。コンポーネントは30以上のメールクライアントで表示テストを行ったそうです。ライセンスはMIT。動作デモも合わせて詳細は以下よりご確認下さい。 Outline Mail動作サンプル

デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料（$17）です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として

メリーメリークリスマス！ マライア・キャリーさんの「恋人たちのクリスマス」がどこかしこから聞こえてきて、ウキウキせずにはいられないドワンゴデザイナーのchiiです。 気持ちが高ぶってしまってコンビニのクリスマスケーキを買ってみたら、店員さんがフォークを4本もつけてくれました。ごめんね、一人で全部食べたんだ…でもありがたくフォークは4つとも使わせてもらったよ…！！ さてさて、前回の記事でMiddlemanの紹介から導入までを書きまして、今回は実際に作るところまで執筆したのですが、想像以上にボリューミーになってしまったのと前回の記事が思った以上に好評だったので、丁寧に解説するべく使い方編と製作編で分けています。 なので今回は、「Middlemanを使うために知っておきたいこと」と「設定ファイルの編集方法」のご紹介です。 ぜひお手元で試しながら読んでみてください。 おさらい Middlemanを