ペンとふせんで！スマホUIのアイデアプロトタイピング - クックパッド開発者ブログ
検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
どうもこんばんは。 初老のデザイナーたあです。 簡潔に書きます。 タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。 こういうやつですね .title-border { display: flex; align-items: center; } .title-border:before, .title-border:after { border-top: 1px solid; content: ""; flex-grow: 1; } .title-border:before { margin-right: 1rem; } .title-border:after { margin-left: 1rem; } これを線を入れたいとこに入れるだけっす。 こんな感じで <div class="title-border">これ</div> 以上でした。 なお余白の取り方
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
Color Library
Color Library – Convert color images in multi-channel for printing devices
意外と見逃してたかも！配色の知識が増える記事10
作成：2016/10/11 更新：2016/10/11 Webデザイン > デザインの印象の大部分は配色によって決まるといっていいほどです。パッとしないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 セパレーション（分離配色） 赤とオレンジ色、白とグレーのような似通った色を識別するために区切りを入れる方法をセパレーションといいます。色と色の間に別色を入れて色同士を分離させることによって配色を和らげたり、引き締めたりします。服でいえばベルトやインナー、フォントならアウトライン。 メリハリがつくので元気な印象や活発さを出したいときに使えます。これとは逆に明度順に並べることをグラデーション配色といいます。 色彩の調和/セパレーション カマイユ わずかな明度差を利用した配色方法をカマイユといいます。曖
スピード＆品質で勝負！Photoshop で使いこなしたい無料ブラシ素材集
あらゆるデザイン表現を可能にする Photoshop には、さまざまな機能が搭載されています。しかし、ゼロから作品を完成させるには、時間も労力もかかってしまいます。 そんなときに利用したいのが、Photoshop ブラシ素材です。今回紹介するアイテムを利用することで、驚くほど簡単に高品質なデザインを作ることができます。 ゼロからデザインを作成できるのはもちろん、ステッカー感覚で利用できるデコレーション用ブラシから、デジタルペイントに欠かせない基本ツールまで幅広く揃えています。 詳細は以下から。 スピード＆品質で勝負！Photoshop で使いこなしたい無料ブラシ素材集 Basic Main Brushes デジタルペイントに必要な基本ブラシを揃えた素材セットで、まで筆ブラシで描いているようなナチュラルな質感を表現できます。 Digital Painting Brushes グラフィック・タ
UXデザイナーにもできるWeb高速化 「体感速度」改善3つのヒント
Webサイトの高速化といえば、フロントエンドやバックエンドのテクニカルな改善の話になりがちですが、「体感速度」の視点で考えると、UXデザイナーにもできることがあります。 もしWebデザインの「最優先事項」がUXだったら、「スピード」が一番重要ではないでしょうか。ユーザーは素早く操作していて、ロードもすぐに終わることを期待しています。私たちはミリ秒単位の世界に身を置いているのです。 しかし、おもしろいいことに、「実際のロード時間は長くないのに、体感スピードが遅いことがある」という調査結果があります。 ユーザーはロード時間をストップウォッチで測るのではなく、あくまでも感覚で測っています。つまり、Webサイトを実際よりも速く感じさせる方法もあるということです。逆に言えば、実際よりも遅く感じさせてしまう可能性もあります。もちろんそれは避けたいことです。 コンバージョン後のことも忘れないでください。
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
Apple、Google、Amazonの「失敗」に学ぶ、フォーム改善3つのヒント
WebデザインやUXデザインの話題では、アップルやグーグル、アマゾンが大人気。でも、ビジネスが成功しているからといって、常にデザインが正しいとは限りません。フォームにおける問題点と改善案を具体的に示します。 これまでに「アップルのように美しく」「グーグルのようにシンプルに」「アマゾンのように分かりやすく」デザインしてほしい、と言われた経験があるでしょうか？ 優れた技術で有名な企業はクライアントから「ゴール」とみなされ、多くの場合そこから学べます。 とはいえフォームのこととなると「デジタルの巨人たち」にさえ改善が必要な点があります。 アップルとアクセシビリティ クライアントはしばしば最初にアップルを引き合いに出すので、ここでもそうします。アップルはフォームを含め、モダンミニマリスト（フラット）デザインのインターフェイスを提供しています。図1に例を示します。 問題はフォームがときどき「ミニマリ
ブックマーク棚卸し！デザインの引き出しを増やすWebデザインギャラリー20選 | DesignSource
こんにちは。YOHICです。 ひゃー！ブックマークの整理って面倒っすね。。 なにか良いサービスはないものか。。 普段、情報収集で眺めているギャラリーサイトを更新したのでご紹介したいと思います！ スポンサーリンク 1 : Choicely http://www.choicely.jp/webdesign/ カテゴリから選べるのが使いやすくて良いです。 Webデザイン、wordpressのテーマ、動画、Webサービス、ツール、企業のカテゴリでも絞り込めます。 （カテゴリ分け大変だったろうなあ。。） 2 : Responsive Web Design JP http://responsive-jp.com/ レスポンシブデザインのギャラリーサイトです。 カテゴリ、カラー、テクニック、タイプから絞り込めます。テクニックから絞り込めるのはいいですね。珍しい。 3 : wanomono http://
正規表現を複数回実行する際の注意点 - Qiita
javascriptで正規表現を複数回実行する際の注意点 以下のコードは"hoge"という文字列が含まれているか正規表現で検索し、結果を表示するコードです。 var example = "hoge"; var regexp = /hoge/g; regexp.test(example); // true regexp.test(example); // false regexp.test(example); // true regexp.test(example); // false ... 一度目の実行ではtrueが返ってきますが、二度目の実行ではfalseが返ってきます。 以降は交互に結果が変わります。不思議ですね。 私はループ内で正規表現を実行する際に、この挙動につまづきました。 一体何が起きているのでしょうか？ var examples = ["hoge", "hoge", "ho
アイコンフォントを作ったのでオープンソース化して GitHub と npm に公開しました | WP-E (仮)
こんにちは。EXP ひのたんです。 最近アイコンフォントを作って GitHub と npm で公開したのでその紹介記事です。 feathericon Web サイト: http://feathericon.com/ GitHub: https://github.com/featherplain/feathericon npm: https://www.npmjs.com/package/feathericon 名前は私の Web 上のハンドルネームである「featherplain (フェザープレイン) 」と icon を合わせた 「feathericon (フェザリコン) 」です。 アイコンフォントと言えば Font Awesome や GitHub の Octicons のアイコンフォントの巨人がすでに存在します。Web フォント化していなくとも、「vector free icons」
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
そのJavaScriptの関数は本当に純粋関数？ | POSTD
(2016/12/11、いただいたフィードバックをもとに翻訳を修正いたしました。) JavaScriptにおいて”純粋関数”とはどういう意味でしょうか？ 一般的なプログラムの用語では、純粋性というのは”参照透過性”として知られています。カッコよく言うと、「 式や関数の呼び出しをその結果と置き換えたとしても、プログラムの振る舞いが決して変わらない 」こと、また別の言い方をするなら、「 同じ入力値を渡すたび、決まって同じ出力値が得られる 」ということです。 これなら直感的に理解できそうに聞こえますし、 x => x * 10 などの関数は純粋に見えます。これに数字の 3 を引数として渡したら必ず、出力値として 30 が得られますからね。では、ある関数が純粋で別の関数が純粋でないと、どうしたら分かるのでしょう？ コードを読むだけで十分でしょうか？ 一般的にどう思われているかを見てみましょう。昨日
KUTE.js | JavaScript Animation Engine
The magic behind Spicr, the result of hard work, the bridge between old and new, the dream and inspiration. Forward Looking The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development. Knowing the Past While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door
Carbide Alpha | Buggy But Live!
Carbide is a new kind of programming environment which (as obligatory in this day and age): Requires no installation or setup Supports Javascript/ES2015 Imports modules automatically from NPM or GitHub Saves and loads directly to and from GitHub Gists But wait, there's more... ...Crazy Stuff Comments live in a Rich Text sidebar #LiterateProgramming Carbide shows results in-between the lines of you
エッジに起因する明暗と色の錯視
エッジがその周囲の明暗や色に広範囲に渡って多大な影響を及ぼす錯視があります。古典的なものではクレイク・オブライエン・コーンスィート錯視と呼ばれるものが有名です。最近では高島翠氏による墨絵効果、また色についてはB. Pinna氏らによる水彩錯視などがあります。 これらの錯視のエッジの形状とは違った新しいタイプのエッジによる明暗の錯視を作りました。なおそれを作るにあたっては、複雑な画像からでも自動的にほぼ瞬時に錯視を起こすエッジを生成する数学的なアルゴリズムを考案し、それに基づくコンピュータ・ソフトも作成しました。この新しいタイプのエッジを使うと、複雑なデザインでも非常に良い錯視効果を出すことが可能です。その実施例の一つが次のものです。
外部ページでもスムーススクロールするプラグイン | Creator Index
外部ページでもスムーススクロールするプラグイン 2015.03.26 jQuery プラグイン はじめに 2015.5.10 サンプルページに外部サイトへのリンクを追加しました。 2015.5.6 スクリプトを一部修正しました。 前回の記事でつくったスムーススクロールのスクリプトをマイナーチェンジし、外部ページでもスムーススクロールするようにしてみました。 外部ページでもスクロール…、とはつまり、アンカーリンク付きの別ページを開いた時、遷移先のページでもスムーススクロールする、ということです。 サンプル 今回は、プラグイン化もしてみました。 まだ、改良の余地はたくさんあると思いますが、もし良かったら使ってください。 smoothScrollEx.js（右クリック→リンク先を保存） INDEX 使い方 仕組み jQuery Easing Pluginを使う 使い方 jQueryを読み込み、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Image Watermark
theDirectory