これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
本当に求めてるのはピクセルパーフェクトという「要件」ですか？｜榊原昌彦
個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな
CalorieMate to Programmer | 大塚製薬
コードを書いていると、 食べることも忘れて ついつい熱中してしまう。 会社でも、家でも プログラマーも、そうでない人も 夢中になって考え続ける、 そんな時こそカロリーメイト リキッドで 素早く手軽に５大栄養素を。 BALANCED FOOD CalorieMate LIQUIDto Programmer ＃うちこむ人にバランス栄養 >MESSAGESメッセージ >Translate Matz コード監修 まつもとゆきひろ Yukihiro Matsumoto プログラマー、ソフトウェア技術者。1965年生まれ、鳥取県出身。愛称は「Matz(マッツ)」。1995年にプログラム言語「Ruby」を公開、その使い勝手の良さから世界中のプログラマーに親しまれ続けている。2012年には内閣府「世界で活躍し『日本』を発信する日本人」の1人に選ばれた。 From Tech Crunch Japan世界的プ
【日本語フリーフォント】本当は教えたくない！デザイナーが仕事で使ってる12選【商用可】 | ベーコンさんの世界ブログ
１．うずらフォント（手書きフォント系） ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！ このフォントの使いみち ダウンロードはこちらから ２．Noto Sans Japanese /a 源ノ角ゴシック（ゴシック太さ多数） GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ ぼくも、そう思います！ あーでも、しかし１つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利！ OSに最初に入ってるフォントは、太さの種類が２、３種類だと思います。 ボールドボタンで太く
目を引くアイキャッチ画像の作り方、50の作成事例とデザインのアドバイス
あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。 Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。 Steal These 50 Branding Kits For Your Startup 下記は各ポイントを意訳したものです。 元記事ではアイキャッチ画像と同テイストの名刺も同時に紹介されています。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Whimsical: サンプル画像 抑えられたトーンとミニマルなタイポグラフィ 画像にソフトなカラーフィルタを使いトーンを抑え目にし、タイポグラフィ
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan
7/25最新記事 見落とされがちなオフライン上での3つのリファラルチャンス edited by Ryutaro Mori 過去に何度もお伝えしてきた行動心理学を利用したコンバージョン最適化テクニック。 本日は、growth hack japanの中でまだお伝えしてなかった行動心理学テクを、実例とともに5つ紹介します。 参考:5 Psychological Principles of High Converting Websites プレグナンツの法則 プレグナンツの法則によると、人間は明確で順序だった物事を好み、複雑なアイディアやデザインを恐れる傾向にあります。 シンプルなものほど予期せぬ不快なサプライズを引き起こしにくいということを本能的に感じ取り、それに従ってシンプルに物事を解釈する人間の傾向を表しています。 例えば以下の英文を見てみましょう。 ① Welcome to growth
ABテストでCVR改善に成功した海外事例まとめ15選！ | LISKUL
「海外ではABテストが盛ん」という言葉を耳にし、その内容が気にはなるものの、実際にそのノウハウや事例を外国語で仕入れるのは一手間だと、先送りにしてしまう人も多いのではないでしょうか。（かくいう私も「先送り」の日本代表です。） そんな皆様の一手間を解消すべく、海外のABテストの事例とその要点を日本語でまとめてみました。 普段から気になっている海外の事例を、どうぞサクッと日本語で仕入れちゃってください。 ※本記事は2014年5月19日に公開された記事をLISKUL編集部にて再編集したものです。 グローバルナビゲーションの削除とフォームの変形でCVR336％http://unbounce.com/a-b-testing/how-a-single-a-b-test-increased-conversions/ ・オリジナルページの特徴は、上部に分厚いグローバルナビが配置されていることと、右カラムに
少ない装飾で素材の魅力を生かす、ズルいWebサービスデザイン実践編 // Speaker Deck
WCAF Vol.11 「Design」 in 福井 で発表させていただきました。 http://wcaf.doorkeeper.jp/events/7028 協力： we love heroku by @ppworks http://welove.herokuapp.com/ （参考）ppworks 氏によるエントリー http://www.genuineblue.jp/posts/weloveheroku-design-renewal/ ズルいデザインテクニック2013 + セミフラット version - in 福井 https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version-in-fu-jing
Illustratorテクニックとフリー素材まとめ | コムテブログ
作成：2013/10/21 更新：2014/11/01 無料素材 > フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで１回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストアップしてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フリー素材まとめ ダウンロードしておきたいフリー素材一覧 Illustrator のチュートリアル 小技 基本テクニック フリー素材まとめ ダウンロードしておきたいフリー素材一覧 ロゴやイラストを作ったりするときに役に立ちそうなアイコン、ベクター、背景、テクスチャ素材をまとめました。少し変わったモノが多いですが、筆者が何度もアクセスしてしまうブクマ一覧です。 学校や教育関係／アイテム全200種類のアイコン素材 -
ウェブサイトのフッタを魅力的にする10のシンプルなアイデア
昨年くらいからウェブデザインの傾向としてフッタを充実させたウェブサイトが増えてきました。 ユーザーの印象に残り、より利便性の高いフッタを設置する際にヒントとなるアイデアをDesign Shackから紹介します。 10 Techniques for a Fantastic Footer 以下は、そのポイントを意訳したものです。 はじめに 1. プライマリ ナビゲーション 2. 「トップに戻る」ボタン 3. 美しいコントラスト 4. インパクトのあるイラスト 5. 充実したコンテンツ 6. インフォメーション 7. メディア ハブ 8. 新鮮なコンテンツ 9. インフォグラフィックス 10. ビジュアル的なアクセント はじめに 魅力的なフッタは、サイトのユーザーに永続的でポジティブな印象を与えることができます。 フッタのデザインと機能性の両方にフォーカスをあてることで、サイトのフッタを魅力的に
フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 | De...
フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 デザインに大きな影響を与えるフォント。様々なフォントがリリースされていますが、今回紹介するのはフリーで使えて、なおかつ、クオリティの高いフォントを集めたエントリー「50 First-class & New Downloadable Fonts For Professional Designs」を紹介したいと思います。 7 days スタンダードなものから、クリエイティブなものまで、様々な種類のフォントが全部で50種類紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Harabara ゴシックの堅いイメージを残しながらも、独特の加工で柔らかい印象もプラスしたフォント。
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
ちょっと手を加えてウェブデザインをグレードアップする6つのポイント
既存のウェブサイトのデザインにちょっと手を加えて「Good」から「Great」にする6つのポイントをMyInkBlogから紹介します。 6 Ways To Take Your Webdesign From Good To Great 下記は各ポイントと実例をピックアップした意訳です。 元記事には実例などが他にも豊富に掲載されています。 1. はじめに 1. グラデーション 2. ホワイトスペース 3. グリッド 4. タイポグラフィ 5. ナビゲーション 6. フッタ はじめに ウェブデザインの「Good」と「Great」の差は小さなものです。平均的な人は素晴らしいデザインを構成する明白な相違点を説明することが可能ではないかもしれません。しかし、好きなデザインを見つけることは可能です。いくつかの素晴らしいサイトを分析することで、その相違点を補う小さなディテールをみつけることができるでしょう
美しいHTMLの条件を綺麗にまとめた一枚の画像 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインに便利なツール18選｜かずたか
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
IDEA * IDEA
ランディングページ集めました。