ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道 | CAREER HACK
即現金化で話題となった『CASH』のデザインをトレース。自ら同じようなデザインをつくってみたという春田さん。そうすることでデザインのポイントやコツを学び、血肉化していっている 模倣におけるクオリティの高さもさることながら、彼が評価されたのは「勝手にやってみる」「自ら学びとる」という新人としての姿勢にあったのかもしれない。 一見すると「ただただ本物をマネしてみる」は地道にも感じる取り組み。すでに公開されているデザインノウハウだって多い。なぜわざわざ？ そこにあったのは、春田さん自身が抱えていた「何もできない自分」との対峙。そしてデザインで社会とつながりたいという強い意志だったー。 もともとは絵にかいたような「ダメ大学生」だった。 ー デザインの模倣、春田さんは「UIトレース」と呼ばれている取り組みですが、どういったきっかけで始めたものだったのでしょうか？ はじめのきっかけは、とにかく自分がカ
【CSS】とにかく読みにくいページをつくってみた！pointer-events でイベントを制御する
こんにちは、R&D 部の青野です。 「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。 ということで、読みにくいページを作りました。 と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。 仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。 また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。 （さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。） ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集
繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ
Webデザインパーツごとのデザイン例 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザインユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。 30 Creative Website Headers クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。 30 Creative Website Headers 27 Stunning
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
デザイン・制作に役立つ素材情報 | Material Feed