Components AI — A new way to explore generative design systems
The open-source design tool for creativesBuild custom design tools without writing any code. Create responsive components, pages, and sites that you can use in any type of web project. Style markup templates with curated themes or your own design tokens. StudioVisually design custom design tools, generative components, pages, and sites
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
ヒントはカメラレンズ。自由にサイズを変えられるレンチのコンセプト
ヒントはカメラレンズ。自由にサイズを変えられるレンチのコンセプト2015.09.01 05:0012,870 渡邊徹則 ありそうでなかったかも。 DIYが趣味の方などは触れる機会も多いかもしれない、レンチやナット。しかしそのサイズの豊富さゆえ、ピッタリ合うものを探すのが一苦労でした。 幅を調整できるモンキーレンチというものもありますが、使い方を間違えるとナットを傷つけてしまい、つかまえにくくなるという欠点も。 そんなレンチ界にもイノベーションを起こすべく、シアトル在住のデザイナーJordan Sterankaさんが考案したのがこちら。ご覧のとおり、サイズを自由に調整できる上に、ナットを完全に包む円形になっているのが特徴です。 カメラのレンズの動きからヒントを得たというこちらのアイデア。奇しくもカメラとレンチの共通用語である｢Aperture（口径）｣と名付けられました。 1本あれば、たくさ
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
現役女子大生が「ウェアラブルデバイス」をデザインしたらこうなった！
現役女子大生が「ウェアラブルデバイス」（身に着けられるデジタル端末）のデザインを行い、そのお披露目会が3月17日に東京・渋谷で行われました。この企画は、リクルートテクノロジーズの研究開発機関「Advanced Technology Lab」とのコラボレーションにより実現したもの。イベントには実際にデザインの開発に携わった現役女子大生9人が登場し、自分が担当したデバイスのデザインへの思いをそれぞれに語りました。 始めに登場したのは「スパイラル型ブレスレット」。先端にピンクゴールドとラインストーンをあしらいました。ラインストーンのサイズも、1つ1つ違うサイズにといったこだわりようです。 続いては「タイル型バングル」。これは配色に特にこだわったデザインで、このバングルを着けたまま海や山に行っても違和感のない色を選んだとのことです。カラーはグリーン・ブルー・オレンジの3種類。 「ファーブレスレット
グーグル、アイデアからプロトタイプの検証までたった5日で完了する課題解決メソッド「デザインスプリント」を公開 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
グーグル、アイデアからプロトタイプの検証までたった5日で完了する課題解決メソッド「デザインスプリント」を公開 Google Venturesが開設したDesign Sprint専用ウェブサイト グーグルのベンチャー投資ファンド部門「Google Ventures（グーグル・ベンチャーズ）」は、2015年1月30日、専用ウェブサイトを開設し、デザインにまつわる独自の課題解決メソッド「デザインスプリント（The Design Sprint）」を公開しました。 デザインスプリントは、ホームオートメーションの開発に取り組むNest Labsやロボット開発企業Savioke、サンフランシスコ発の人気コーヒーショップBlue Bottle Coffeeなど、様々な業種で実践された成果をもとに、スタートアップ企業に向けた“DIYツール”としてまとめられました。 プロトタイプを短期間でつくりあげてユーザー
ノンデザイナーのための無料ビジュアルコンテンツ作成ツール9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターのナッツです。 突然ですが、Shareaholicのレポートによると、ソーシャルメディアからのトラフィックはPinterestがTwitterを抜いて2番目の参照元となっているようです。（1番多いのはFacebook） 参考：Shareaholicレポート https://blog.shareaholic.com/social-media-traffic-trends-10-2014/ この調査結果は、魅力的なビジュアルコンテンツはサイトへ多くのトラフィックをもたらしてくれる可能性を示しています。 しかし、私のようなノンデザイナーにとって「魅力的なビジュアルコンテンツ」をつくることはなかなかハードルが高いもの。そもそもPhotoshopとか持ってない！という方がほとんどではないでしょうか。 そこで今回は無料で使えるビジュアルコンテンツ作成ツールを紹介していきたいと思いま
note ――つくる、つながる、とどける。
クリエイターが文章やマンガ、写真、音声を投稿することができ、ユーザーはそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽しんで続けられるよう、安心できる雰囲気や、多様性を大切にしています。
アメリカでWeb制作会社が存在出来ない5つの理由 | freshtrax | btrax スタッフブログ
恐らくWeb制作会社として続けていたら、とっくに潰れていただろう。 昨日、アメリカでのWeb制作会社、及びWebマーケティング会社の事情について聞かれた。昨今の市場と自社の状況をふまえ思わず上記の通り答えてしまった。 我がbtrax社は創立当初は”ごく普通”のWeb制作会社として業務をスタートした。 それから数年はサンフランシスコのオフィスでアメリカの会社に対してサイトを作る、ただそれだけの会社であった。 その後、市場の変化を中心に様々なファクターが理由で気がつけば現在のクロスボーダーを特徴としたサービスデザインや、ブランディングをサービスの中心にする様になった。 恐らく日本ではいまだビジネスとして成り立っている、Web制作・システム開発・Webマーケティング業務であるが、残念ながらここアメリカでは一つの企業としてそのようなサービス”だけ”で生き残って行くのはかなり不可能に近いと思っている
GOV.UK and the Government Digital Service | blog / bookslope
デザイン変更後 また、GOV.UK は、4月に同国の「デザイン・ミュージアム」が開催している「Designs of the Year 2013」を受賞しています。公開して2年後にデザインで受賞するなんて行政関連では非常に珍しいのではないのでしょうか。すばらしいですね。 このサイトをデザインしたのは、内閣府らしく (つまり内製?)「Government Digital Service (GDS)」という名称で、政府のデジタル戦略を一手に担っている組織のようです。 by Ben Terrett この GDS が GOV.UK のデザイン原則「Design Principles」をまとめたサイトも秀逸です。当初策定した7つの原則から3つ追加されて、10箇条になっていました。直訳になりますが訳しておきます。 Government Digital Service – Design Principle
デザインに自信がつく、タイポグラフィの基本
第25回 岡山WEBクリエイターズ「パララックス / CSS / タイポグラフィ 再入門」にて講演。［2014-04-19］ ちょっとした工夫で“普通のテキスト”を“デザインされたテキスト”に変えることができます。今までのWEBデザインではデバイスフォントという制約もあり、DTPと比べるとタイポグラフィはあまり重要視されてきませんでしたが、高解像度のデバイスやウェブフォントの普及などにより、その必要性は高まっています。適切で根拠のあるテキストの扱い方を学び、あなたが制作するデザインに自信つくよう、DTP・WEB両方のデザイン経験を元にタイポグラフィと文字組版の基本を解説いたします。Read less
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
FreeHTML5.co
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
PolymerThemes | Free Polymer Themes & Templates
建築コスト、工期半減へ グーグル発の「超」設計法 建設ITジャーナリスト 家入龍太 - 日本経済新聞
Webサイトの横幅まとめ - ULTRAZONE