SF映画のUIがたくさん写真で見れる本なのか? と思いカジュアルな気持ちで購入しましたが、良い意味で予想を裏切る内容でした。 SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン SFは現実世界の制約から解放されて、技術的にはるかに進んだ未来の世界を描いている。 私たちは、そこからインスピレーションやアイデアを得て、想像力に磨きをかけることができる。 本書には『月世界旅行』(1902年)から『ミッション:インポッシブル/ゴースト・プロトコル』 (2011年)まで、 100年以上の歴史をもつSFのデザインを調査・分析した結果から抽出した、現代のデザインに生かせ る141のレッスンが収録されている。 最高のデザインをSFから学びとること、SFのデザインを仕事に生かすことを目的として、通信や学習 、医療など 人間の生活を手助けするためにSF世界ではデザインがどのように活用されているのかを読み解く。 文章のボリュームはかなり多く、詳細な解説もあって大学のテキストのような印象を受けました。 冒頭できちんと研究の目的や方法論、なぜその方法を選んだかについて説明と本書における用語の定義が述べられており、学術的な書籍となっています。 カラー図版と動画は筆者Webサイトから 本書の図版は半分以上がモノクロ印刷で、実際の動きも分かりにくいのが残念でした。著者がかなり頻繁に更新しているブログでは、実際のカラー図版や動画を豊富に見ることができます。 意外と日本のSFアニメとかも取り上げられていて、図版を見ているだけでも面白いサイトになっています。 Sci-fi interfaces | IxD Lessons from Sci-Fi ちなみに原題はMake It Soで、『スター・トレック』の台詞から来てるそうです。意味は「やりたまえ」とか「そうしたまえ」といったニュアンスです。 STARWARSの立体映像端末から得るインタフェースデザインの教訓 本書では具体的なSF作品の例を挙げながら色々なテーマでデザインの考察を行っていくのですが、特にスターウォーズの立体映像についてのそれは印象的なでした。 ダースベーダーの小さな立体映像を見下ろす兵士の様子が劇中で描かれています。この時、映画では描かれていないダースベーダー側の端末では、どのように兵士は表示されているのでしょうか。 もしダースベーダー側の画面で、彼が巨大な兵士の立体映像に見下ろされているとしたら、それは彼の社会的な立場として不自然に思えます。 (会議で気に入らない上司を殺害するくらいですから….) では、ダースベーダー側でも小さい立体映像の兵士を見下ろしているのでしょう? でも、そうしたら二人の視線が合わせられなってしまいます。 視線が合わせられない映像によるコミュニケーションは通信装置として不自然です。 従って、もし立体映像による通信技術が可能になったとしたら、その機械のデザインとは、両者の視線を一致させるデザインとインタフェースが必要になるだろう…. そんな理論でした。 本書では、このように一見荒唐無稽とも見える映画内の演出から、実際に役立ちそうな教訓を導き出しています。 テーマは、コミュニケーション端末／コンピューターのGUI／ジェスチャーによる操作／音声操作／脳インタフェース／拡張現実／医療／教育／セックスにも及び、大変興味深い内容でしたしました。 ユーザーインタフェースと人間の社会性 上記の例にあるように、ユーザーインタフェースには人間の社会性を尊重したデザインが重要だということが、全体を通してよく注意されている理念に思えました。 特にWebデザインやプロダクトデザインなど、ユーザーインタフェースに関心のある方にとってはとても興味ある内容だと思います。文字ビッシリでページ数も多いですが、すばらしい内容でした。 仮想現実におけるユーザーインタフェースデザインの可能性 最近はVR技術の発展が早く、Web業界にいた人間がいずれはそういった分野のデザインやコンテンツ制作に進んでいくということも十分考えられることです。 僕は、今私達がPCやスマホで仕事をするのと同じ感覚で、VRデバイスを使って仕事やコミュニケーションをする未来が数年以内にやってくることを期待しています。 VRの中では何でもCGで表現できてしまうので、その中で使う何かのアプリケーションのユーザーインタフェースとは、 (まさに本書の内容と同じように)SF的なアイデアが実際の道具としてデザインされ直すことになるはずです。 既に、VR空間自体をVR空間でレイアウトする為のアプリケーションのデモが存在しています。 もちろんVRに限らず、ウェアラブルデバイス・IoT・AR技術・pepperのような人型ロボットなどでしか実現できない、 未来のサービス体験や、アプリケーションのデザインにも役立つ視点だと思います。 ※本レビュー記事は、筆者が2014年12月14日にAamazon.co.jpへ投稿したカスタマーレビューを元に加筆・修正したものです。
普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。 Wiki・チャット・チケット・資料の作成が捗ります! ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。 参考: 知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］ Markdown形式 Bitbucket・GitHub・Qiita・Slack等、最も色々なシーンで使う形式です。 コード javascript:prompt('Markdown','%5B'+document.title+'%5D%28'+location.href+'%29')() 出力サンプル: [タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE](http://media-massage.net/blog/linkbookmarklet/) ブックマークレット: Title+URL: Markdown ChatWork形式 国内で人気の高いChatWorkへURLリンクを綺麗に貼れるブックマークレットです。選択中のテキストも引用されます。 ChatWorkの記法は独特ですぐ忘れてしまうので、ブックマークレット化すると楽です。ChatWorkに投稿すると下図のような表示になります。 コード javascript:prompt('ChatWork','[info][title]'+document.title.replace(/([\[\]])/g,'\\$1')+'[/title]'+location.href+'\n'+window.getSelection()+'[/info]')(); 出力サンプル: [info][title]タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE[/title]http://media-massage.net/blog/linkbookmarklet/ [/info] ブックマークレット Title+URL: ChatWork Textile形式 Redmineを中心に、Bitbucketの一部やGitHubでも使うことができます。Markdownに比べるとマイナーですが、筆者はTextileの方が好きです。 コード javascript:prompt('Textile','%22'+document.title.replace(/&#34;/g, '')+'%22%3A'+location.href)() 出力サンプル: "タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE":http://media-massage.net/blog/linkbookmarklet/ ブックマークレット: Title+URL: Textile HTMLリンク形式(タイトル) <a>タグでマークアップ済のテキストデータを出力します。 コード javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%3E'+document.title+'%3C%2Fa%3E')(); 出力サンプル: <a href="http://media-massage.net/blog/linkbookmarklet/">タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE</a> ブックマークレット Title+URL: HTML HTMLリンク形式(URL) <a>タグでマークアップ済のテキストデータを出力します。タイトルではなくURLをそのまま使用し、title属性にページタイトルをセットします。 コード javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%20title%3D%22'+document.title+'%22%20%3E'+location.href+'%3C%2Fa%3E')(); 出力サンプル: <a href="http://media-massage.net/blog/linkbookmarklet/" title="タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE">http://media-massage.net/blog/linkbookmarklet/</a> ブックマークレット Title+URL: HTML(URL) プレーンテキスト形式 FacebookやTwitterの本文にしたり、紙の資料に使ったりと、何にでも使えるプレーンテキストのフォーマットです。 コード javascript:prompt('Plain text',document.title+'%5Cn'+location.href+'%5Cn')(); 出力サンプル: タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE http://media-massage.net/blog/linkbookmarklet/ ブックマークレット Title+URL: Plain
「づや会 vol2 ~Dockerの話~」登壇時の資料です。自宅サーバをVagrantやDockerでイミュータブル化した話を中心に、Vagrant・CoreOS・Dockerを紹介した内容です。 サンプルコード: vagrant-coreos-docker-demo 参考Qiita記事1: Vagrant・CoreOS・Dockerでインフラ素人が自宅サーバを立てた話 - Qiita 参考Qiita記事2: Dockerで即実行できる、社内・自宅向けオープンソースWebアプリ - Qiita ※イメージ画像にmatthew_hullさんの写真whale_breachを使用しています。 スライド スライド(一部)
Vagrant・CoreOS・Dockerを使った小規模な自宅サーバ向けの環境構築ファイルです。イミュータブルなインフラ構築を手軽に試せる内容になっています。 Qiitaに書いた記事、Vagrant・CoreOS・Dockerでインフラ素人が自宅サーバを立てた話 - Qiita で紹介した自宅サーバの構成を元に、『Dockerで楽しむ自宅サーバ』のための簡易版として作成しました。 システム構成図 ホーム画面 ダウンロード https://github.com/hokkey/vagrant-coreos-docker-demo ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2015年2月15日 コメント 永続的に保存するデータをdata.vdiに隔離し、それ以外はイミュータブルな構成としています。
社内勉強会資料。フロントエンド技術者向けに自分が知っているインフラ関係の概要をまとめたスライドです。 スライド スライド(一部)
プロフィール 堀 祐磨/Hori Yuma/y_hokkey/ほりでー 多摩美術大学を中退後、デザイナーとしてグラフィックデザイン・Webデザイン・UIデザインを経験。デザイン業務の傍らSassやJavaScriptのプログラミングを学ぶ。2015年、フロントエンドエンジニアとしてLIGに入社。現在エンジニアとしてのキャリアを積んでいるところ。 LIG入社時にあだ名が『ほりでー』に。それ以来、毎日がホリデーです。 作業環境 メインOS: Mac OS X IDE: IntelliJ IDEA エディタ: TextWragnler シェル: zsh キーボード: HHKBPro2(無刻印) 椅子: Hermanmiller Aeron Chairs/KOPLUS bodyflex 関連リンク Facebook/Twitter: 気になるニュースをコメント付きで随時投稿 GitHub: OSSプロジェクト Slideshare: 勉強会スライドなど flickr: 過去に撮影した写真作品など LinkedIn: あんまりちゃんと書いてない 登壇・執筆実績 Qiita: Web系の技術記事を投稿（2014年〜） LIGブログ: 比較的ライトな技術記事を月1ペースで公開（2016年〜） STDIO上野 by LIG: レスポンシブウェブデザインをテーマとした特別授業を定期的に担当しています（2016年〜） シートで簡単チェック！ デザイナーが見落としがちなUIデザイン12の想定漏れ（2017年06月06日） LIGブログで記事を公開しました。 【完全保存版】シートで簡単チェック！ デザイナーが見落としがちなUIデザイン12の想定漏れ Webエンジニアが考えた絶対に寝坊しない4つの対策。信頼性設計を身近な課題に応用しよう（2017年06月05日） LIGブログで記事を公開しました。 Webエンジニアが考えた絶対に寝坊しない4つの対策。信頼性設計を身近な課題に応用しよう textlintで日本語の自動校正サービスを作ってみた！ (2017年03月14日) LIGブログで記事を公開しました。 textlintで日本語の自動校正サービスを作ってみた！ | 株式会社LIG なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ (2017年02月20日) LIGブログで記事を公開しました。 なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG がんやHIVの研究に貢献できる「ボランティアコンピューティング」の始め方 (2017年01月17日) LIGブログで記事を公開しました。 がんやHIVの研究に貢献できる「ボランティアコンピューティング」の始め方 | 株式会社LIG iOSアプリWorking CopyとTextasticでGitが使えるモバイル開発環境を作る (2016年12月12日) LIGブログで記事を公開しました。 iOSアプリWorking CopyとTextasticでgitが使えるモバイル開発環境を作る | 株式会社LIG LIGFE’S powered by LIGSHIP (2016年11月08日) LIGが開催するエンジニア向け勉強会を企画・ファシリテーションしました。 【20:00スタート】LIGフロントエンドのJavaScript事情を全部話しちゃう会! - connpass JetBrainsのIDEでもっとGitを使いこなそう！ 意外と便利なGUIから使える小技 (2016年11月07日) LIGブログで記事を公開しました。 JetBrainsのIDEでもっとGitを使いこなそう！意外と便利なGUIから使える小技 | 株式会社LIG マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ (2016年09月30日) LIGブログで記事を公開しました。 マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ | それいけ！フロントエンド 復活したAdobe CC Extract! その終了から再開までの経緯 (2016年09月09日) LIGブログで記事を公開しました。 復活したAdobe CC Extract! その終了から再開までの経緯 | それいけ！フロントエンド づや会 vol6 〜GCPの話〜 (2016年06月16日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: DockerコンテナをGKEでクラスタリングしてみた イベント告知: づや会 vol6 ~GCPの話~ フロントエンドエンジニアの勉強会「LIGFE’S」を開催しました (2016年06月07日) LIGブログで記事を公開しました。 フロントエンドエンジニアの勉強会「LIGFE’S」を開催しました | LIGプレス 使いこなそう！ テンプレートリテラルとimport/exportステートメント (2016年05月26日) LIGブログで記事を公開しました。 使いこなそう！テンプレートリテラルとimport/exportステートメント | ES6のある星に生まれて づや会 vol5 〜機械学習の話〜 (2016年05月19日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: LIGブログをテキストマイニングしてみた イベント告知: づや会 vol5 ~機械学習の話~ LIGフロントエンドの勉強会LIGFE’S (2016年04月26日) LIGが開催するエンジニア向け勉強会を企画・ファシリテーションしました。 LIGフロントエンドの勉強会LIGFE’S - connpass づや会 vol4 ~Node.jsの話~ (2016年04月18日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: はじめてのElectronアプリ PDF差分比較アプリを作ってみた イベント告知: づや会 vol4 ~Node.jsの話~ LIGブログレポート記事: 今話題のBotをNode.jsで作れる？！LIGエンジニアで勉強会してみた！ | のびすけのイベントレポート づや会 vol3 ~AWSの話~ (2016年03月22日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: AWSで楽しむ自宅サーバ? イベント告知: づや会 vol3 ~AWSの話~ Yeomanで自動化！ 自作generatorの作り方 (2016月11日) LIGブログで記事を公開しました。 Yeomanで自動化！自作generatorの作り方 | 株式会社LIG 本当の初心者向け！ Git入門のための概念から基本用語まで (2016月01日) LIGブログで記事を公開しました。 本当の初心者向け！Git入門のための概念から基本用語まで | Git編：一歩踏み出すフロントエンド入門 づや会 vol2 ~Dockerの話~ (2016年02月15日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: Dockerで楽しむ自宅サーバ イベント告知: づや会 vol2 ~Dockerの話~ WebDesigning 2016年02月号 連載『課題解決のためのUI実装講座』を共同執筆しました。Sassを利用したスプライト画像の実装テクニックについてご紹介した内容です。 GoogleBooksから閲覧できます: Web Designing 2016年2月号 - Google ブックス サンプルデータのダウンロード: サンプルデータ｜WD ONLINE 非リアなのに、いきなりプレゼン!? 社外勉強会の登壇に向けて対策した6つのこと (2016年01月25日) LIGブログで記事を公開しました。 非リアなのに、いきなりプレゼン！？社外勉強会の登壇に向けて対策した6つのこと | 株式会社LIG Remixing Vol.3 (2015月05日) オールアバウト・RichMedia・LIGの3社で開催したエンジニア向けの勉強会に登壇しました。 発表スライド: コンポーネント単位で考えるWeb制作 イベント告知: Remixing Vol.3 with オールアバウト and LIG - Remixing | Doorkeeper
「Remixing Vol.3 with オールアバウト and LIG」へ登壇した際に初めて公開したスライドです。 Web制作で画面要素のコンポーネント化をすすめることによるメリットと、実践的なコンポーネントの実装手法について説明しています。 スライド スライド(一部)
社内勉強会用に作成したスライドです。プログラミングに親しくないWebデザイナーなどを対象に、Sassで登場するプログラマブルな機能をやさしく解説することを意図しています。 スライド スライド(一部)
社内勉強会用に作成したスライドです。アイデアを広げる上で役立つマインドマッピングやチャート作成ツールを、具体的な使用例を交えて紹介しています。 スライド 動画パート1: MindNode使用例 動画パート2: Scapple使用例 スライド(一部)
オープンソースのDAMシステム「ResourceSpace」のためのカスタムテーマです。 デフォルトでインストールされている「whitegry」テーマをベースに、特にレスポンシブデザインプラグインをONにしたときの外観を見やすいものに置き換えることを意図しています。 なお、ResourceSpaceについては拙作のQiita上の記事で詳しく紹介しています。 オープンソースのDAMシステム、ResourceSpaceのまとめ - Qiita オリジナル版whitegryテーマとの比較: ダウンロード https://github.com/hokkey/whitegry_plus ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2015年9月23日 コメント デザイン資料の収集や管理をする上で、ResourceSpaceをかなり便利に使っています。 ただ、このソフトはイマイチ画面のデザインがイマイチで、見辛く、使い辛い部分も多いのが難点です。 このテーマでは、デフォルトのテーマをベースに、細かい部分で使い勝手の向上や、見栄えの改善を行っています。
opml2indexignは、OPML形式をInDesign用に整形するXMLスタイルシート(XSL)と、便利なタスクを設定したGruntfile、セッティング済みのInDesignテンプレートでできた、シンプルな自動組版ツールです。 OmniOutliner、Tree、MindNode、Scapple等の人気のエディタから出力したOPML形式のデータを、InDesignのドキュメントへ自動組版できます。 最新版のInDesignCCでも問題なく動作します。 ダウンロード／ソースコード https://github.com/hokkey/opml2indesign ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2014年9月23日 コメント InDesignを使うととても美しいドキュメントが作成できるけど、当たり前ながらワープロとして手軽で軽快に使えるソフトとはいえません。 そこで、自分がよく使うアウトラインエディタのコンテンツをInDesignへシームレスに流し込めるツールを自作してみることにしました。 InDesignは標準でXMLを読み込むことができるし、アウトラインエディタがよく使うOPML形式はXMLの1種なので、そんなに難しいものではなかったです OPMLの仕様が極めてシンプルだったので、XSLTもかなりシンプルな内容になってます。 OPMLを適当なXML構造に整形するXSLT(XMLスタイルシート)を用意 整形後のXML構造に合わせたInDesignテンプレートを作成 OPMLの変更を監視し、リアルタイムにXMLへ変換するGruntタスクを用意
プログラムならではの表現を模索するため、ランダムに自動生成されるモーションタイポグラフィーを制作しました。 AppleのQuartzComposerを使用した3Dアニメーションで、Mac OS Xのスクリーンセーバーとしてそのまま使用できます。 動画 ※BGMは動画のためのもので、作品には含まれません。 スクリーンショット コンセプト サインシステムの美しさと、表記パターンの多様さに注目 東京メトロ銀座駅・日比谷駅・有楽町駅・東銀座駅は1つの地下空間として繋がっていて、 そこには番号の振られた出口があわせて44存在します。(2012年当時) 駅構内には鮮かな黄色の出口案内が無数に掲示され、その矢印記号の向きと、 アルファベットと数字の記号の組み合せはかなりの種類に及びます。 Metro Exitsは、この出口サインの組み合わせの多用さと、タイポグラフィとしての美しさに着目した作品です。 この作品では、9方向の矢印記号と44種類の出口記号が、ランダムな組み合わせで無限に生成されては、通路の奥から手前へ消えていきます。 ときおり、通路の下を6つの「G」マークが通過していくのは、編成の地下鉄銀座線を表現しています。 ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Screen savers内に配置すると、Macのスクリーンセーバーとして選択できるようになります。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2013年12月18日 コメント 空港や鉄道の公共サインシステムが大好きです。以前よく利用していた地下鉄の日比谷駅はとても出口の数が多く、アルファベットや数字のパターンがとても沢山あります。 丁度プログラミング独自の表現をやってみたいと思ってたため、サインシステムのタイポグラフィにランダム性を取り入れたら面白いんじゃないか、と思ってこれを作ってみました。 実際のタイポグラフィでは「Frutiger(フルティガー)」が使用されていますが、この作品では便宜上「Neue Helvetica(ノイエ・ヘルベチカ)」を使用しています。
RSSフィードから取得した情報を3DCGで表示する作品です。そのままMac OS X用のスクリーンセーバーとして使用できます。 動画 ※BGMは動画のためのもので、作品には含まれません。 スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Screen savers内に配置すると、Macのスクリーンセーバーとして選択できるようになります。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2013年1月 コメント 未来派図画工作で配布されていた『20世紀ボヤージ』(現在は『21世紀ボヤージ』)に感銘を受け、自分も3Dで動くタイポグラフィを作ってみたい！ という動機から作成した作品です。3D空間にRSSフィードから取得した見出しをレイアウトし、ダイナミックに色彩が変わったり、3次元的にアニメーションする表現を試してみました。
