2018年 導入してよかったデザインツール｜灰色ハイジ｜note
Twitterのタイムラインで「2018年なんとかまとめ」というリンクをよく見かけることで年末を感じている灰色ハイジです。こんにちは。 日々いろんなツールが増えていますが、個人的に今年導入してみて良かったデザインツールをまとめてみました。 - Contrast - Principle - Figma - RealtimeBoard - IconJar - UXKit - Notion - ConceptsContrast WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）が定めた数値で色のコントラストチェックができます。これまでにも同様のツールはありましたが、Sketchのプラグインだったり特定のソフトウェアでしか使えなかったものが、これだとMac Appでメニュー バーから起動できるのでどのソフトウェアでも使えます。 Principle アニメーションやインタラクションがつくれ
営業・運用を支える "気付ける" 管理画面
広告が邪魔なのでspeakderdeckにも上げました https://speakerdeck.com/brtriver/ying-ye-yun-yong-wozhi-eru-qi-fu-keru-guan-li-hua-mian 動画: https://youtu.be/CqMILKp3Ens?t=3h53m39s PHPカンファレンス2015での講演資料。 データを管理するだけが管理画面じゃない。サービスの質を向上させていくことができる最強の管理画面を開発運用していて意識していることを4つの工夫を軸にまとめています joind.in: https://joind.in/15322Read less
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n
SUS - ネットの力でスイカは割れるのか？
ネットとリアルの関係はここ数年、ソーシャルメディアの登場と普及を経て、今大きく変容している。2000年以降約10年の間に、ブログや Twitter といった口コミをドライブしやすい アーキテクチャを持ったソーシャルメディアの登場によって、新しいストーリーを持ったネット発の流行や、「炎上」と呼ばれるようなネット発のスキャンダルが数多く発生し、それらがマスメディアをにぎわす機会は日に日に増えてきている。 リアルからネットへ、そしてネットからリアルへ、というフィードバックループは加速するばかりである。ソーシャルメディアの登場で熱量を増すネットのうねりをいかに現実に落とし込むか、というのは広告キャンペーンを考える上での近年の大きなトピックでもある。 では、この動きを一歩進めて、より直接的に、過激にネットとリアルのフィードバックを実現するシステムを構築できないだろうか? そこで、Dentsu Des
知の放牧
ネットノマドというソーシャルアクトにおける、「知＝Intelligence」の在り様をどう定義するのか、というのがここ数日の課題でありました。たまたま読んでいた本『嶋浩一郎のアイデアのつくり方』にヒントがありました。嶋氏は情報の取り扱いを「収集」、「放牧」、「化学反応」の三段階に分けており、特に「放牧」というフェイズがネットノマドにおいては重要なステージなのではないかと感じました。 嶋氏が語っているのは情報収集ということについてですが、ことに複数人のインディペンデント・コントラクターの集合体においては、その緩やかなコミュニティの中へ収集した知を放牧し、巧いマッチングの相手が見つかれば化学反応が起きるという構図は、至極シンプルで、しかしこの「知を放牧する」ということはなかなかどうして難しいことのように思います。 個人間の知を放牧する一番簡単な手段は「交換日記」でしょう。お互いの文脈を汲みなが
官能のUIデザイン - SLN:blog*
ちょっと前にJonas Erikssonさんというデザイナーのつくった「76-Synthesizer」という架空のiPhoneアプリのUIデザインがめちゃくちゃセクシーで驚いたんですよ。色っぽいとしか表現しようがない。 最近のiPhone/iPadアプリのデザインとか見てると、ものすごくよくできているものがたまにあって、フォトリアリスティックなんだけど真俯瞰でUIっぽさを担保している...みたいな独特の質感になってる。こういうデザインって、UIデザインの歴史としてとらえると、まず、OSで描画できるグラフィックが32ビットになったことからはじまり、Photoshopの機能の充実、デザインのメソッド化、Illustratorのグラデーションマップ芸の成熟なんかも影響して、結構自然な流れのように感じちゃうんだけど、グラフィックデザイン史として見るとかなり特異な状況になってきているんじゃないかとい
NATURAL BEAUTY BASIC go-round Show
NATURAL BEAUTY BASICの最新情報をお届け。おすすめコーディネート・WEBカタログからショッピングも可能(通販サイト)。NBB MEMBERSにご登録頂くとメンバーズだけのお得なキャンペーンやSALE情報をいち早くお知らせします。
違反車を即通告：「ソーシャル監視」アプリ | WIRED VISION
前の記事 『トロン：レガシー』の世界を創る：ギャラリー 違反車を即通告：「ソーシャル監視」アプリ 2010年12月20日 IT社会 コメント： トラックバック (0) フィードIT社会 Keith Barry ボストンのラッシュアワー。Image:Josh Michtom / Flickr 何千もの覆面パトカーや速度カメラが町の道路に溢れ、自動車の匿名性が失われる日が来たようだ。 音楽サービス英Shazam Entertainment社の共同創設者Philip Inghelbrecht氏が開発した『DriveMeCrazy』は、交通違反をした車のナンバープレートをスマートフォンに告げて交通違反を報告できる、音声作動式アプリだ。 哀れな交通違反者は、「フラグ」を立てられ、仮想の「交通違反切符」を受け取る。たいしたことではないように思えるかもしれない。だが、「交通違反」があった日時や場所など、
KBO CP
障害・メンテナンス情報 KDDIは、お客さまにご不便をおかけするような通信・回線状況が発生した場合、本ページでお知らせします。 ご請求に関するお手続き お支払い方法の変更や請求書の再発行方法、その他ご請求に関する便利なサービスなどをご案内します。インボイス制度対応についてはこちらからご確認ください。 よくあるご質問 よくあるご質問についてお答えいたしております。お問い合わせの際には、まずこちらをご覧ください。 サービス利用中のお客さま用 お問い合わせフォーム サービスご利用中のお客さまへ、フォームでのお問い合わせをご案内します。電話でのお問い合わせ先は、各サービス別サポート情報からご確認ください。
ネットサービスで起業するならディレクション能力は社内に : けんすう日記
インターネットビジネスをやるなら インターネットビジネスは、 - 元手がかからない - 在庫もかかえない - 固定費、変動費ともに少ない という夢のような商売ですが、その分、大量のプレイヤーが参入してくるというジャンルです。 そんなこんなですが、未だにIT業界は盛り上がっているみたいです。ソーシャルゲームという、mixiやモバゲーなどのサイト上で動かせる有料課金つきのゲームが流行っていて、それを求めて起業する人もいるみたいです。 起業が増えるのはとてもいいことだなあ、と思っているのですが、近くでみてて「こうしたほうがいいのにな」と思うことがあるので、紹介します。 社内にあるべきはディレクション能力 ネットサービス（ソーシャルゲーム含む）で起業したいのであれば、「サービスを作れる人」が中にいる必要があります。 サービスが作れるとは何か。それは - 流行るサイトの仕組みを考えられる - 儲ける
よりよいWebデザインにするための配色のセオリー :: Love & Design ::
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）
テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』 – creamu
DiaryTechnology テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』 美しいナビゲーションメニューを実装したい。 そんなあなたにおすすめなのが、『Elegant navigation bar using CSS』。テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーションだ。 このエントリーでは、↑のような美しいメニューのHTMLソースとCSSソースがすべて公開されている。 「Live preview」からはサンプルがみることができるし、「Download this tutorial」からは全ソースがダウンロードできる。 メニューのテキストとリンク先を変更するだけで実装可能だ。 テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション、ぜひ使ってみてはいかがだろうか。
情報設計の重要性、わかってますか？: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ひさしぶりにユーザビリティの話です。 ただし、最初に言っておきますが、Webの話じゃないのであしからず。 ユーザーインターフェイスのサイズと情報の構造化情報設計を行う際には、情報をその内容に応じて、階層構造化します。 この情報の構造化が意味をもつのは「生きていることの科学／郡司ペギオ－幸夫」でも書いたように、情報量（コンテンツ量／機能の種類など）とユーザーインターフェイスの物理的なサイズとの関係から「部分情報問題」が起こりえるからです。 このように問題を定義するならば、これからのインタフェースは「部分情報問題」になるといわざるをえない。なぜならば、インタフェースにかかわる情報はより複雑化して増大する傾向にあり、ユーザーがこれらの多くの知識を個々の機械に対して把握することは容
なんだかんだテキスト： 残しておくか、切り詰めるか、一掃するか？
ウェブページの前置きとして用意されているテキストは大抵長すぎるので、ユーザはそれを読み飛ばしてしまう。しかし短い前置きがあると、それに続くコンテンツの目的の説明となってユーザビリティが向上することもある。 Blah-Blah Text: Keep, Cut, or Kill? by Jakob Nielsen on October 1, 2007 数多くのウェブページで冒頭に出てくる前置きの文章は、私がなんだかんだテキスト（blah-blah text）と呼ぶものだ： ユーザがそのページにたどり着いた際に、普通は読み飛ばしてしまうテキストである。どちらかというとユーザの視線が向くのは、そのページに用意されている機能や箇条書きリスト、ハイパーリンクなど、自分から何かアクションを起こしやすいコンテンツの方なのだ。 なんだかんだテキストの中でも最悪の部類に属するのは、何の意味もない、まったくの埋
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Honoka - 日本語も美しく表示できるBootstrapテーマ
IDEA * IDEA
長文日記
[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス
１００の無料で使えるWebデザイン テンプレートとツールのまとめ - Chocolate（チョコレート）