[B! webデザイン] iR3のブックマーク

ウェブ業界の流行りはクズ。：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ

村上福之です。ウェブ業界のはやりは普通の人にはクズだと思うことが、ここ数日ありました。レスポンシブはクズヤフーも食べログもクックパッドも東洋経済もレスポンシブでないことが全てを物語っている。レスポンシブはWeb業界寄りな人には結構普通でした。なにより工数が大幅に削減できます。ぼくも今まで、結構普通だと思ってましたが、サイトの種類によっては普通の人には使いにくいようです。普通に何も考えずにレスポンシブにすると、やはりなんだか使いにくいし、デザインもよくないです。PCとスマホで同じ情報を掲載すると、スマホが縦長くなるか、PCがさみしくなるかどっちかです。ファーストビューもよくない。縦長になりやすい。レスポンシブよくない。まぁ、ペライチサイトとか、バイラルサイトなどはそれでもいいと思います。とりあえず、ヤフーとか食べログとかクックパッドとか東洋経済っぽいのが大事だと思いました。最近。だって

iR3 2016/12/21

ふむふむ

webデザイン

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事﹁Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ﹂を参考ください。 ▲左側は未指定︵和文等幅︶の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境‥ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

iR3 2016/12/02

ふむふむ凄いのか？

リンク

Semantic UI

Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit

iR3 2016/11/16

教えてもらった

リンク

Webデザイン初心者でもできる、Bootstrapの使い方超入門

Bootstrapデフォルトのテーブルスタイル Bootstrapのテーブルは、以下ルール内で使用しましょう。 <div class="container"> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter

iR3 2016/06/03

ふむふむ table回りの修飾の説明が有難い

リンク

ニュースアプリの「究極のUI」って何ですか？　Yahoo!ニュースと日経電子版が大激論

Yahoo!ニュースとエンジニアtypeが﹁﹃公共性×編集×テクノロジー﹄～ニュースメディアに求められる使命に、開発者はどう応えるのか～﹂と題した勉強会・交流会を9月17日に開催しました。後半のディスカッションでは、Yahoo!ニュースと日本経済新聞のアプリ担当者が、ニュースアプリに求められるUI/UXとは何かを語り合いました。 ⇒前半のディスカッションはこちら‥︻編集×テクノロジー︼激戦のプッシュ通知　Yahoo!ニュースアプリの﹁苦い﹂1日登壇者は、日本経済新聞の電子版アプリを監修したUIデザイナーの深津貴之さん︵THE GUILD、写真左から2番目︶、同紙デジタル編成局編成部の重森泰平次長︵左から3番目︶、ヤフーニュース事業本部のUIデザイナー宇野雄︵左から4番目︶。モデレーターはエンジニアtypeの伊藤健吾編集長︵1番左︶。あわせてエンジニアtypeの記事﹁ニュースアプリ﹁究極

iR3 2015/10/20

ほ〜“iOS/Android/Web/紙とそれぞれのルールや世界観があるときに、全部がけんかせずに共存するため「これを決めておかないといけないよね」という感じで、根本的な原則10カ条みたいなものを最初に作りました”

Webデザイン

リンク

Webデザインが「どこかさみしい」と思ったとき、3分で試せるアイデア7つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、デザイナーのまきこです。 iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。ところで、デザイナーのみなさんは、普段作業をしているときに﹁このままのデザインだと、なんかさみしい�﹂﹁もっとにぎやかにしたい﹂と思ったことはありませんか？そんなときは、制作物に応じた﹁にぎやかし﹂をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが﹁なんかさみしい﹂と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します！ ▼ デザインアイデアに詰まったときはこちらもどうぞ。

iR3 2015/10/16

ふむふむ勉強になりまする

Webデザイン

リンク

ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ

2014年、チェックしておきたいUIデザインをdribbbleから紹介します。高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2014年を振り返りつつ、来年はどんな素敵なデザインが生まれるのか楽しみですね。 GIF for the Weather App まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。

iR3 2014/12/18

デザイン大事！磨きたい！

リンク

ウェブデザインをはじめるあなたへ - ウェブ雑記

ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座色相、明度、彩度で色を説明できるようになる。ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。その上で、あまり間違いのない色の選び方がわかるようになる。ノンデザイナーのための配色理論最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。ウェブサービスの企画とデザイン僭越ながら明治学院大学で講義した時に作った資料。なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。かんたんキレイなウェブデザイン僭越ながら勉強会 (UT Startup Gym) 用に作った資料。なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ

iR3 2014/07/16

#debeg もくもくタイムに拝見

webデザイン

リンク

16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL

ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか？個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン︻王道︼おしゃれな髪型の女性の大きめな写真を載せるデザイン︻実例︼ Nine9 / ナインMerryLand 美容室 pukka hair美容院のホームページデザインポイント﹁おしゃれな髪型をしている女性の写真を載せる﹂美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。これは美容院という商売の特性

iR3 2014/07/02

ふむふむ

webデザイン

リンク

Introducing the Nitrous.IO Hack Button: Bring Your Code to Life - Nitrous.IO Blog

iR3 2014/04/21

リンク

サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では﹁使いやすさ﹂という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー︵ディレクター、Web担当者、エンジニアなど︶向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。ボタン、テキスト、コピーなどボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。1‥ボタンじゃない要素は、ボタンと似たデザインにしないボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

iR3 2014/04/17

ふむふむ

webデザイン

リンク

IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ

2014年3月19日 Illustrator, Webサイト制作これまでは﹁WebデザインといえばPhotoshop﹂というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは

iR3 2014/03/19

リンク

WEBCRE8.jp

AmazonでAdobe Creative Cloudの12か月版 Windows/Mac対応（オンラインコード）が40％もの割引きセールをやっているようです。すでに契約済みの人も追加で買う分には問題なく買えるようですよー★ 続きを読む

iR3 2014/02/05

#debeg で見てる

webデザイン

リンク

komagata.org

iR3 2014/01/15

#debeg で見てる

webデザイン

リンク

伊藤忠の住まい CREVIA（クレヴィア） | 新築マンション・戸建て

クレヴィア上野入谷東京都台東区東京メトロ日比谷線「入谷」駅徒歩４分 JR山手線・京浜東北線「鶯谷」駅徒歩6分 JR各線「上野」駅徒歩12分クレヴィア横浜沢渡神奈川県横浜市神奈川区横浜市営地下鉄ブルーライン「横浜」駅徒歩15分 JR京浜東北線他・相鉄本線「横浜」駅徒歩16分東急東横線・横浜高速鉄道みなとみらい線「横浜」駅徒歩17分京急本線「横浜」駅徒歩18分横浜市営地下鉄ブルーライン「三ッ沢下町」駅徒歩10分

iR3 2014/01/15

レイアウトの参考に見てる #debeg

webデザイン

リンク

STARTATD

iR3 2014/01/09

ふむふむ

リンク

Incremental Redesign with Rails | Socialcast | Enterprise Social Network Platform

When the engineering team was planning the new version of Socialcast we knew that we were going to be overhauling virtually every page in the application. From a customer and marketing perspective we wanted to introduce all the changes together, but as an engineering team we were wary about introducing so much change in one big release. We wanted to find a way that we could incrementally release t

iR3 2013/07/22

デザインを一部ちょっと変えて様子を見るなどの際にprepend_view_path　を使えば便利なのね #sendagayarb

webデザイン

リンク

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう

▼2016/01/25 クラスメソッド×RoomClip×ネイルブック DesignNight http://dev.classmethod.jp/news/design-night-vol-01/ 問い合わせが多かったんですが、使用フォントは「丸丸ゴシック」です RoomClip / http://roomclip.jp/

iR3 2013/07/18

webデザイン

リンク

A New Formula for Quantitative UX Decision Making

Say hello to the Adjusted-Wald Binomial Confidence Interval, a powerful method for making better user experience decisions Imagine a formula that would allow you to take data from a very small pool of users (often as few as 8; possibly as few as 3) and figure out why, for instance, Autodesk customers are calling support, whether Budget.com visitors can rent a car in under a minute, or why cardhold

iR3 2013/07/17

#readingHD 次は定量的にUXを決定する公式

webデザイン

リンク

When to Use Which User-Experience Research Methods

Summary: Modern day UX research methods answer a wide range of questions. To help you know when to use which user research method, each of 20 methods is mapped across 3 dimensions and over time within a typical product-development process. The field of user experience has a wide range of research methods available, ranging from tried-and-true methods such as lab-based usability testing to those th

iR3 2013/07/17

#readingHD 次はユーザエクスペリエンス調査手法に突入

webデザイン

リンク

はてなブックマーク

タグ

関連タグで絞り込む (41)

webデザインに関するiR3のブックマーク (67)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス