2016年7月7日(木)に全面リニューアルし、5パターンのデザインを楽しめるようになったカヤックのコーポレートサイト！その裏側ではどんな工夫があったのでしょうか？ なぜデザインガイドラインを作るのか？ 今回のリニューアルは、ただでさえ大規模なカヤックサイトを、5倍デザインするという、果てしない規模の開発になりました。これを真っ当にページごとにデザインしていては、修正・変更があるたびに作業量は5倍になり、いくら時間があっても足りません。 そこで、デザインチームでは効率的に作業を進めるために「デザインガイドライン」を制作しました。5つのデザインごとに、文字やボタン、UIパーツをまとめたファイルを作ることで、修正の量を最小限に抑え、同時にエンジニアへの修正指示もかんたんにできるようになりました。ここでは、そのガイドラインの一部をご紹介します！ ナビゲーション ガイドライン メニューやフッターなど

2016年12月7日 Illustrator 昔からIllustratorラブ！な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ＆ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト！ アセットの書き出しって何？ 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機

お知らせ 平素より、株式会社VASILYウェブサイトをご覧いただき、誠にありがとうございます。 2018年4月に、VASILYはグループ会社と統合し新会社「株式会社ＺＯＺＯテクノロジーズ」に生まれ変わりました。 これまで本ウェブサイトをご覧いただいた皆様には、心よりお礼申し上げます。 「株式会社ＺＯＺＯテクノロジーズ」へ

2014年12月16日 便利ツール ファイルのバージョン管理＆プロジェクト管理ができるuniversions。昨年のクローズドベータ版の頃に開発者さんに紹介していただき、かわいらしいデザインと使いやすさからずっと応援していたツールです。「デザイナー向けにGitなどを優しく解説する記事はありますが、どうしても構築の手間や敷居の高さがあるのではないか…」という開発者さんの思いがうまく反映され、使われている言葉もわかりやすく、スッキリとしたデザインになっています。どんな方でも安心して使いこなせるはず。先月ついに正式版がリリースされたので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ エンジニアじゃなくても簡単に使える管理システム これまでのバージョン管理システムとは違い、黒い画面になにやら記述しなくても、クリックするだけでファイルの履歴管理ができます。間違えてファイルを上書き保存

2013年ふりかえりと2014年の予想でも書いたように、ここ1年でモバイルアプリのプロトタイプを作れるツール・サービスが数多く登場しています。 もうけっこうな数が出てきましたので、これからプロトタイピングを検討しようとしている方の参考に、また自分自身の把握のために、一度整理してみたいと思います。 なお、例によって後半は息切れ気味です。気付いたら1万文字近く書いてた… (2014.08.15)記事書いてから半年くらい経って、各種サービスもアップデートしたりがあったのでいろいろと追記しました プロトタイピングとは何か そもそもプロトタイピングって何ぞやというお話なのですが、Wikipediaにいい感じの解説が載っておりましたので転載します。 "プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

Windows 8.1 には、システム全体で使われるタッチ操作の簡単なセットが用意されています。このタッチ言語を一貫して適用することで、ユーザーに、自分が使い慣れたアプリと似ていると感じさせることができます。アプリの使い方をわかりやすくすることで、ユーザーの信頼感が増します。タッチ言語の実装について詳しくは、「ジェスチャ、操作、対話的操作」をご覧ください。 この記事の内容: タッチの設計原則 タッチ言語 タッチ ターゲット 位置と持ち方 関連トピック タッチの設計原則 即座にフィードバックを返す 画面がタッチされたときにすばやく視覚的フィードバックを返すようにすると、ユーザーが安心して操作できます。操作に対して、色やサイズの変更、移動で応答する必要があります。操作できない要素は、画面がタッチされたときだけタッチ画像を表示するようにします。 コンテンツが指の動きに付いていくようにする キャン

ユーザー体験（ユーザーエクスペリエンス／User Experience: UX）という言葉が広く聞かれるようになってきた。半ばバズワードのように、特にウェブデザインやマーケティングの記事などの中では、この言葉を見ない日はない。しかしながら、多くの場合、UXという言葉の真意や可能性を取り違えてしまっている。本稿では、いくつかの観点からUXの本質を考えてみる。 １．UI/UXという誤用 1.1. UIとUX まず、多くの記事や講演などで見られる「UI/UX」という表現からとりあげてみたい。 UI/UXとは、もちろん、User Interface / User Experience（ユーザーインターフェイス／ユーザーエクスペリエンス）の省略形であるが、多くの記事などで「すぐれたUI/UXデザイン事例」、「UI/UX講座」などの表現が用いられている。 「ユーザー」という共通項があるため、共通でくく

お餅のような心と体をもつ男、どうも江刺家です。 2012/01/26UPDATE design()に転載＆連載移行しました。 #目に優しいUIデザイン(1) #目に優しいUIデザイン(2) 主に業務系アプリケーションの開発がおおい弊社ですが、その開発過程でよく出てくるワードに「目が疲れない・飽きない・見やすい」という要求が多いです。 今回はこの「目が疲れない」について、掘り下げたいと思います。あくまで個人的経験・感覚によって記事をまとめています、「人間工学」だとか「なんとか相学」とか「統計データ」とか基にした話ではありませんのであしからず。 色デザインについて もちろんBtoC・BtoBtoCの世界では喜んでもらうのが第一という観点からインパクト重視のデザインがよく見られます。ショッキングピンクの選択なんて朝飯前です。 かっこよく＝とりあえず黒（#000000）背景で指定しとけばいいや。っ

AI, emotional design, weird careers, and other takeaways from Figma’s 2024 conference

航空機のコックピット内には、緊急時対応マニュアルなど多くの書類が置かれていますが、マニュアルが読みにくく緊急時に対応できない、夜間飛行時に全く読めないなどの事例が1980年代に多数発生しました。そこで、NASAは読みやすい書類を書くために過去の文献などを徹底的に調査して、コックピットやフライトデッキのマニュアルに使用するタイポグラフィのマニュアルを作成。調査書には、読みやすいタイポグラフィを作るためのルールがまとめられており、現在のウェブデザインにも活用できる内容になっています。 (PDFファイル) ON THE TYPOGRAPHY OF FLIGHT DECK DOCUMENTATION - Flight-Deck_Documentation.pdf http://ti.arc.nasa.gov/m/profile/adegani/Flight-Deck_Documentation.p