http://www.life-is-bitter.com/entry/ui_checklist
Corder's High 2017 「CSS設計方法論とその先」 レポート · Code of Duty
東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。 セッション8つめはピクセルグリッドの高津戸さん。 CSS設計方法論や各種ツールとどう向き合うか 自分が困っていれば採用すれば良い。 全部採用しようとするとコストが掛かりすぎる 多くのCSS設計方法論 OOCSS モジュール化 BEM クラスに命名規則を設け、シンプルなセレクタで書くルールに CSSの容量増えすぎてしまう問題への解決 モジュール化 ベース + スキン (OOCSS) ブロック + モディファイア (BEM) 書き方がみんなバラバラ問題への解決 コーディングガイドライン StyleLintを使う 同じコードへの対策 mixin, extendでコードDRYに Autoprefixerを使い管理をコード外に スタイルガイドで重複したモジュールの作成を回避 それで解決しない問題
【2016年上半期】ウェブデザイナーが注目したい、本当に流行中のWebデザイントレンド5つ
Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言
初心者でもデザイナーのように文字の見た目を劇的によくする「カーニング」をマスターするための9つのポイント
優れた無料フォントはたくさんありますが、フォントによっては文字を並べた時に文字同士の間隔が不自然になってしまうことも。そんな時は文字間隔を調整するカーニングを行うことでデザインをよくすることができますが、どのようにすれば適切にカーニングができるのか、初心者でも使える9つのポイントがまとめられています。 A Beginner’s Guide to Kerning Like a Designer – Design School https://designschool.canva.com/blog/kerning/ 文字と文字の間隔は、単純に同じ距離であれば自然に見えるというわけではありません。以下の画像では左側の「Type」の文字間隔が全て等しく、右側は同じではないのですが、実際に人間の目で認識されると自然に見えるのは右側になります。これは、それぞれの文字によって持っている「空間」の大きさに
【生存戦略】20代のWebデザイナーが身につけるべき15のスキル一覧 - paiza times
Photo by Matthew Pearce 今回のpaiza開発日誌は片山がお送りします。 皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？ 最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。 現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。 企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
いまWebサイトで流行ってる色 / Maka-Veli .com
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
あの頃みんな若かった。国内有名16サイトの2008年→2014年のデザイン比較
こんにちは、結婚式で悪友に高校時代のポエム的なものを晒されたゆうすけです。 そういうの、本当勘弁してほしいんだよな。 先日Macの古いデータを整理していたところ、2008年頃のウェブサイトのキャプチャー画像を大量に発見。当時はWebデザイナーではなくエディトリアルデザイナーだったのですが、デザインの練習（模写）のために取り溜めていた様子。 あの頃の自分は結構真面目だったのかもしれない。 やっぱり今とだいぶ違うなー。具体的にどこが変わったのかな？と結構楽しく眺めていたのですが（どうしてアナログデジタル問わず、掃除をすると懐かしくて手が止まってしまうのか！）、せっかくなので記事としてまとめてみることにします。 当時の担当デザイナーがもしこれを見たら、恥ずかしくてたまらないかもしれないですけどね。一度世に出したものですからね。しょうがないね。 大阪府知事に橋下徹氏が就任し、船場吉兆があの伝説的な
レスポンシブデザインの進化はWebの常識を変えるか？ | ゆっくりと…
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか？」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
Stop Asking Me to “Sign Up”
The fate of many startups depends almost entirely on one conversion point: When a visitor becomes a user. All too often, this pivotal role falls on the shoulders of a pitifully generic “sign up” button that’s lucky to get even a minute of consideration during development. If you take a moment to consider the wording of your signup button, you can drastically increase how many of your visitors turn
自分がロゴデザインをするときに意識していること
友人であるフリーエンジニアの原さんが、ある日クラウドソーシングのランサーズでこんな依頼を出していました。 Web制作個人事業主のWebサイトロゴの依頼/外注/仕事 | クラウドソーシング「ランサーズ」 ランサーズでロゴを募集してみたの雑記- I.I.S ブログ 原さんには日頃いろいろ仕事を振ってもらったり一緒に野球を見に行ったりと、公私ともに大変お世話になっております。 コンペ形式というのもあり、賑やかしの足しにでもなればと自分もひとつデザイン案を作ってみることにしました。 せっかくですので、これをネタに自分なりのロゴデザインの手順、ポイントをまとめてみます。 1: クライアントの希望を確認 クライアントがロゴにどういうイメージを持たせたいのかを念入りにヒアリングします（当たり前ですけど）。 ロゴは、その会社・サービスの指針を表すものであると同時に、それが使われる全ての媒体（ウェブサイト、
WebエンジニアのためのWebサービスデザイン実践講座
DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)
HTMLメール制作のコツや便利なサービスいろいろ
2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通
グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック | LISKUL
photo by Robert S. Donovanウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。 そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？ この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。 受賞作品を参考に、ヒットするウェブサイトを作りましょう！ 参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント グッドデザイン賞とは？1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれてい
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーファーストなWebサイトのデザインとは？ | Webデザイン、これからどうなるの？（全10回）
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
