企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。

プレゼンテーションは単純にスライドを並べてたんたんと説明していけば良いわけではありません。全体を通して一つのストーリーが必要です。ストーリーが一貫して提供されてこそ、聞き手は納得し、理解を深めることができます。 そんな納得感あるストーリーを作るのに適したソフトウェアがTwineです。Wikiっぽさのある面白いソフトウェアです。 Twineの使い方 Twineは元々Windows、Mac OSX用のソフトウェアでしたが、2.0からWebベースになったようです。プレゼンテーションのスライドや小説、マインドマップの代わりに使うのも良さそうです。 TwineはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Twine / An open-source tool for telling interactive, nonlinear stories tweeco

Windowsなんて嫌だ！Officeファイルなんて嫌い！なんて言いつつもシステム開発時にお世話になるのがExcelです。CSVファイルを出力したり、逆に読み込む機能は良く作るのではないでしょうか。 わざわざCSVを介さずにExcelファイル（xlsx）をそのまま読み込んだり、書き出せるのがExcelJSです。node用の便利なライブラリです。 ExcelJSの使い方 例えば書き出しを行った場合、こんなにカスタマイズされた書き込みが行えます。 逆に読み込んだ場合。各セルの値やシート名などデータがとれます。値が入っているセルの範囲も取得できます。 $ node testBookRead.js ./test.xlsx Worksheets: 1 Sheet 1 - blort Dimensions: A1:S12 値の種類としては数字、テキスト、日付、リンク、関数が使えます。ただし関数は関数の

スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl

チャットやコミュニティサイトをはじめ、Webサイトを訪れているユーザに通知を投げたいと思うケースは多々あります。HTML5のデスクトップ通知を使う手もありますが、サポートしていないブラウザもあります。 そこで試してみたいのがHTML5 Push Notificationsです。サイトの訪問中にしか使えませんが、サーバサイドでも簡単に使えるデスクトップ通知ツールです。 HTML5 Push Notificationsの使い方 送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。 文字を変えれば通知も変更できます。 HTML5 Push Notificationsはサーバサイドからも通知を送信できます。例えばPHPの場合、次のようなコードでできます。 $app_key = 'YOUR_APP_KEY'; $app_secret = 'YOUR_APP_SECRET'; $a

どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。 そこで使ってみたいのがSkylineです。Skylineはデザインフレームワークという訳ではなく、カスタムスタイルシートフレームワークを構築する差異の出発点として欲しいと考えているライブラリです。 Skylineの使い方 Skylineは4つの階層に分かれています。ベース、エレメント、レイアウトそしてモジュールです。それぞれ目的に沿って、書き加えていきます。SkylineはOOCSS/SCSSを使って書けるようになっています。 HTMLの構造はHTML5に沿って書かれており、モバイルファーストな設計思想になっています。さらにjQueryの組み合

Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evil IconsはRails/Sinatraそしてnodeと組み合わせて使えるようになっています。その他、Gruntで使うこともできます。Gulpはまもなくのサポートとのことです。SVGはベクターなのでサイズも色も自由に変更できるのが利点ですね。 Evil IconsはSVG製、MIT Licenseのオープンソース・ソフトウェアです。 Evil Icons outpunk/evil-icons

Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って

マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。 そこでGoogleもアイコン集を提供しているのですが、これはPNGまたはSVGです。Material Design FonticonsはそれをWeb Fontとして提供します。 Material Design Fonticonsの使い方 基本的にGoogleのマテリアルデザインアイコンと変わりません。 Material Design FonticonsはWeb Fontなので一つのファイルで表示サイズにこだわることなく利用できます。アプリであればGoogleの画像ベースであっても自動的に選択を変えてくれますが、WebアプリケーションならばMaterial Design

Bootstrapの登場以降、管理画面テンプレートと言った類のものが数多く登場しています。Bootstrapをサービスにそのまま組み込むのには躊躇してしまっても、運営者側の管理画面であれば十分すぎる品質と言えます。 今回紹介するFlakesもその一つですが、管理画面のUIに特化したテンプレートであるというのが特徴的です。 Flakesの使い方 Flakesは管理画面特化型とあって、管理画面上で必要そうな機能が揃っています。 Flakesはダッシュボード的な機能からデータメンテナンスまで幅広い管理画面テンプレートとなっています。カラーリングも最近のフラット系にあるほどカラフルではなく落ち着いた雰囲気なのが良いですね。 FlakesはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Flakes • An Admin UI & Template

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コンピュータと現実世界との間で情報をやりとりする方法はいくつかあります。目で見てキーボードで入力するのも一つですが、非常に面倒くさいです。昔からある手法として知られているのがバーコードです。 バーコードスキャナーを使うことで伝票や商品に印字されたバーコードを読み取れます。しかしいくつかのバーコードを読み取るだけでスキャナを購入したくないという方はQuaggaJSを使ってみてはいかがでしょう。 QuaggaJSの使い方 QuaggaJSはJavaScriptで書かれたバーコードリーダーです。 残念ながらQuaggaJSはCode128とEANにのみ対応しており、日本で使われているCode39には対応していません（フォークして作れそうな気もしますが）。Androidは既に対応しているの

Webブラウザは基本的に安全に使えるように設計されています。しかし悪意をもった開発者がセキュリティホールをつき、Webアクセスしてきた人から情報を盗み取ったり、Webブラウザをクラッシュさせたりします。 そうした脆弱性を発見するツールを開発している方が、その性能評価として使えるのがFiring Rangeです。Googleが社内で開発しているWeb脆弱性検知ツールのInquisitionをテストする際に使っているそうです。 Firing Rangeの使い方 Firing RangeではよくあるXSSなどを提示しています。 Firing Rangeが提示するスクリプトはセキュリティ上問題のあるコードになります。どういった点が狙われるのか、それを学ぶのに役立つでしょう。ハッシュやCookieを使うなどWeb全般と言うよりはJavaScriptを活用していく中でのセキュリティホール検知ツールをタ

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic

Bootstrapが特に活かされている場面というと、管理画面ではないでしょうか。そこまで画面デザインにこだわらなくてよく、情報設計がきちんとできていれば見栄えの良いUIが作成できます。開発者自らが設計、デザインできるのが手軽で良いです。 そんなBootstrapを使った管理画面デザインは多数ありますが、今回はビジュアル化を特に想定しているDashboards by Keen IOを紹介します。 Dashboards by Keen IOの使い方 まずはデザインを見てみましょう。 Dashboards by Keen IOはBootstrap 3.2に対応しています。Bootstrapのバージョンアップは早いのでこの辺りの対応バージョンのチェックも忘れないようにしましょう。 Dashboards by Keen IOはHTML5/JavaScript製、MIT Licenseのオープンソース

Webデザイナーの方で、今表示されているページのスタイルシート設定を確認したいと思ったことはないでしょうか。DevToolsなりを使って確認できますが、スタイルシートごとに分かれていたりしてちょっと分かりづらいです。 実際にどのスタイル設定が適用されているか確認したい、そんな目的にぴったりなのがCSSViewerです。 CSSViewerの使い方 CSSViewerはChrome ウェブストアで公開されています。インストールするとアイコンが追加されますので、任意のWebページで実行します。 フォントやテキスト、色、ボックスなどの情報が確認できます。 さらに要素の情報を出力する機能があります。気になる要素を右クリックすると、CSSViewer consoleというメニューがあります。ここから出力したい設定を選択します。 CSSViewerを使えばデザインの確認が容易になります。さらにそれをコ

文章を書くときには普段使っているテキストエディタを使うのが一般的ですが、書く文章の種類によってツールを使い分けてみるのも面白いかも知れません。そうすることでフォーマットが統一されて、文体が安定してくる可能性があります。 Dreamwriterは小説などを書くのに適したエディタとのことで、文章を章立てて記述できるようになっています。Webブラウザだけで保存の手間もありません。 Dreamwriterの使い方 DreamwriterではlocalStrageへの保存の他、Dropbox連携を使ったリモート保存も行えます。またオフラインにも対応するようです（現在対応しているかは不明）。アウトラインエディタとして使っても良さそうですね。 フレームワークとしてElmを使っており、リアクティブなプログラミングを学ぶ上でも興味深いプロダクトとなっています。 DreamwriterはHTML5/JavaS

Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。 そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。 Material Iconsの使い方 Material Iconsは数百種類のアイコンが提供されています。 アクション系。 特徴としては一つのアイコンで終わりではなく、その状態によって斜線を引いたり、アイコンを重ねたアイコンがあることでしょう。 アラート、AV、コミュニケーション。 音量アイコン一つとっても、音量の大小、ミュート、設定不可などとパターンが作られています。 コンテンツとデバイス。 スマートフォンでも利用も想定されていますのでデバイ

ソーシャルの活動はその蓄積をビジュアル化することによって精神的な報酬を得られます。金銭的な報酬ではない分、より高いエンゲージメントが実現できるようになります。 GitHubで積極的に活動している方に使ってみて欲しいのがGithubScouterです。GitHubでの活動を戦闘力という形にしてくれるスカウターです。 GithubScouterの使い方 インストールはRubygemsで簡単です。 $ gem install github_scouter 後はGitHubのユーザ名を指定するだけです。 $ github_scouter moongift 戦闘力: 156 攻撃力: 112 知力: 42 すばやさ: 2 # repositories (50) 1. Ruby 13 2. JavaScript 13 3. Python 4 4. CoffeeScript 2 5. Objective

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは主にHTMLへ変換されますが、それ以外でもPDFやePubへの変換など色々と用途が広がっています。パーサーも多く、シンプルなフォーマットなので自分のよく使っているファイル形式へのコンバートもさほど難しくなさそうです。 ということで今回はmd2docxを紹介します。名前の通り、MarkdownファイルからMS Wordファイルへ変換するソフトウェアです。 md2docxの使い方 md2docxは一気に変換するのではなく、行ごとにMS Wordに追記しながら進んでいきます。その様子が面白いです。PowerShellを使っています。対応しているのは見出し、表題/副題（専用記法）、リスト、画像、テーブル、改ページ（独自記法）などとなっています。 さらにマクロが記述できるよ