The Pixel School is a design methodology created by Arnaud Mercier (May 10, 1972 - September 26, 2011) and formalized by AREA 17. It is a defined way of working that has great impact on the final product. It consists of a set of design principles and the techniques to achieve them. Disenchanted with the quality of design on the web, Arnaud created the Pixel School in 1999. It became a cornerstone

1.記事は10行程度で改行する。また本文1行30～35文字程度で折り返す文字サイズおよび文字幅にする。 2.パンくずはあるか（外す場合妥当な理由があるか） 3.フッターにサイトマップがあるか（外す場合妥当な理由があるか） 4.問い合わせは目立つか（目立たせない場合妥当な理由があるか） 5.外部リンクは別窓設定されているか。また別窓アイコンが設置されているか 6.三階層程度の構造になっているか（これ...

The repository of publicly available design systems and pattern librariesStart Exploring SystemsWhy Adele?

こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot

「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニックの勉強になるレイアウトやUIコンポーネント・要素が揃ったPhotoshop用、Sketch用の無料素材を紹介します。

一定期間更新がないため広告を表示しています

もう１０年以上デザインを行い１００は越える制作をしてきましたが駆け出しの頃はノイローゼになるは、何度もこの業界を辞めよようと思ったか。。そんな苦労を皆様にして欲しくないと思い僕の制作ノウハウをお伝えし更に「コンセプトシート」「ヒアリングシート」をプレゼントします。Webデザイナーをこれから志す人や、未経験だけどWebデザイナーになりたい人にも必見です。 デザインの仕事は本当に大変 WEB制作（ホームページ制作）をしている方は必ず悩む事、それはWEB制作をいかにスムーズにするかという事です。 中でもとびきり面倒な事として上げられるのがクライアントから「デザインを作っても何度もリテイクをくらう」ということです。 更に制作したのは良いが効果が出ないとクレームが来ることです。。。 制作の進め方は個人に依存してしまう。 過去私も同じような経験をしております、この業界色々な事が出来る分制作の方法はその

サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す

2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行

2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ

Tabslet is yet another jQuery plugin for tabs, is lightweight, is easy-to-use, is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0. and supports custom events, rotation, animation and controls.

2015年1月16日 フォント, 便利ツール 久しぶりにブックマークしているサイトを整理しました。という事でお掃除後の恒例行事？私がブックマークしているフォント・Webフォント・テキスト関連のWebサイトを、中の人へ感謝の気持ちも込めてシェアします！何年もお世話になっているサイトばかりですが、ここ最近はWebフォント関連のサイトが増えてきましたね。いいな！と思えるサイトがあれば嬉しいです。 ↑私が10年以上利用している会計ソフト！ フォント関連 フォントhack.jp フォントhack.jp 日本語の無料フォントの表示確認ができるサイト。複数のフォントを表示して比較することもできます。 dafont dafont 英字の無料フォントを大量に集めたサイト。大量すぎて眺めてたらいつも物凄く時間がたってますw ライセンスは各自要確認。 フォントガレージ フォントガレージ 日本語フォントの販売サイ

こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日（水）に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン＆マナー設計」にて登壇させていただきました。 皆さんは「トーン＆マナー」という言葉を耳にしたことがありますか？「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン＆マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン＆マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。

Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）

2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多