タグ

Webデザインに関するponnaoのブックマーク (80)

  • のっぽ.jp藤中理絵

    の っ ぽ 藤 中 理 絵 は 独 立 し ま し た サ イ ト は そ の う ち ち ゃ ん と 作 り ま す I I T ----- あ 、 そ し て 、 w o r k s ペ ー ジ を 作 ろ う と し て い ま す が 、 時 間 が な く 、 こ の ま ま だ と 、 い つ ま で た っ て も 公 開 で き な そ う な の で 、 適 当 に 写 真 を の せ る こ と に し ま し た 。 ----- 近 頃 ち ょ っ と 陶 芸 や っ て ま す 。 野 宝 窯 ↓ ス マ ホ ケ ー ス ↓ え ん ぴ つ フ ァ ミ リ ア ↓ タ プ タ プ バ ッ グ ↓ メ ラ メ ラ タ オ ル ↓ S m i l e T シ ャ ツ ↓ オ ワ リ カ ラ ↓ ア ジ パ ン ダ ー ズ 総 選 挙 ム ー ビ ー 朝 お き た ら

    ponnao
    ponnao 2013/06/21
    思わず読んでまう(゚д゚)!
  • クライアントに振り回されるWebデザイナーに共通した、たった一つの特徴 - studio room134

    どうしたらクライアントの納得するデザインにたどり着けるのだろう。と考えたことはありませんか?デザインのフィードバック地獄で苦労したWebデザイナー、ディレクターの方は多いと思いますが、振り回されがちなWebデザイナーの特徴とその対処法について、ケーススタディでまとめてみました。 ■クライアントに振り回されるWebデザイナー/WEBディレクターの特徴 「フィードバック指示を額面通りに受け取ってしまう」 これに尽きます。クライアントはデザインをした事が無い人がほとんどなので、修正指示もデザイン的には正しくない事がかなりの割合であります。 これは映画を観て良かった悪かったは誰にでも評価できるが、その映画をどのように修正したらよりよくなるかは経験を積んだ者にしかわからない、というのと同じことです。 にもかかわらず、「ここのボタンを赤くしてください」、「背景をグレーにしてください」という指示を額面通

    クライアントに振り回されるWebデザイナーに共通した、たった一つの特徴 - studio room134
  • なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密

    Amazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日Amazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な

    なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
    ponnao
    ponnao 2013/03/08
    当たり前に使わせてるとこにすごさを感じる。
  • 今年のWebデザイントレンドはベタ塗り!フラットなデザインのWebサイト

    【2013年はフラットなデザインが流行】Wind... / Diesel - jeans, clothes,... / web design agency | Alta...他...全17件 【2013年はフラットなデザインが流行】 Windows8の影響なのか海外ではベタ塗りのフラットなWebデザインが大流行中です。日でもよく目にすることになりそうです。

    今年のWebデザイントレンドはベタ塗り!フラットなデザインのWebサイト
  • 擬似要素を使った見出しデザイン

    このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付

    擬似要素を使った見出しデザイン
    ponnao
    ponnao 2013/01/29
    これはすごい使えそうw全部三角がミソなのよね。
  • ウェブ業界は人材が余っていて人材が不足している

    ある企業サイトの作成に関わっていた。サイトに真剣に向き合いながら、一度決めたことをひっくり返すようなことは言わない、よいクライアントだった。 作成に関わったので贔屓目もあるかも知れないが、よくできたサイトだった。好みの違いはあっても、誰に見せても「合格」をもらえるデザインだったと思う。 作ってから何度か改修があり、若干テイストが変わることもあったが、一貫して企業サイトとして恥ずかしくないデザインだった。改修のたび、担当のディレクター・デザイナーが愛情を持って頑張っているんだな、と思っていた。 そのサイトのトップがまた改修した。 ダサい配色、適当なグラデーション + 角丸 + ドロップシャドウ、カーニングが調整されていない文字……。 素人のようなデザインだった。 これでクライアントのOKが出たことに驚いた。と同時に、それを提出したディレクターが許せなかった。それ以上に、これでデザイナーとして

    ウェブ業界は人材が余っていて人材が不足している
  • 文字をなめらかにした - hitode909の日記

    RetinaディスプレイのMacBook Proほしいけどお金がなさすぎて買えないからこのブログをRetinaディスプレイ化することにして,ブログ全体を小刻みに横に揺らして,文字の残像が見えるから解像度が高く見えるということにした.文字がなめらかになったと思う. はてなブログを小刻みに揺らす.js — Gist 追記 iPhoneとかで見るとたぶん揺れてないと思う.下にPC版っていうリンクがあるからそこから見れると思う. 追記 そろそろいいかと思って,この記事だけなめらかにすることにした.

    文字をなめらかにした - hitode909の日記
  • Webデザイナーになること、Webデザイナーであり続けること

    Webデザイナーになること、Webデザイナーであり続けること、おそらく後者のほうが何十倍も難しい。 高度なスキルをもっていても、買いたたかれる時代 税理士事務所でアルバイトをしていた時期がある。当時、税理士受験をしていた。当時、先生に毎日のようにいわれたことが「税理士資格をとってもえないよ」だった。どんどん、競争が激しくなり、単価が安くなるよという絶望トークをきかされた。 当時、私は20代。この話を信じていなかった。 税理士資格をもっていれば、なんらかの仕事は保証されるとおもっていた。当時の私には”エキスパートがえなくなる時代”を想像することはできなかった。手に職さえあれば、なんとかなるとおもっていた。 『僕は君たちに武器を配りたい』で著者の瀧哲史さんによれば、高度なスキル(たとえば弁護士でも)や高度な技術をもつ部品でも、スペックが明確に定義された瞬間、コモディティ化して、これ以上利

    Webデザイナーになること、Webデザイナーであり続けること
  • 面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder

    Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r

  • 作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。

    ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄

    作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
  • 無料でオリジナルデザインのロゴが誰でもカンタンにすぐ作れてダウンロードも可能な「Free Unique Logo Creator」

    オシャレでかっこいいロゴを作るのはセンスと労力を要する大変な作業ですが、「Free Unique Logo Creator」を使えばテキストボックスに文字を記入するだけで誰でもあっという間にスタイリッシュなオリジナルロゴを作ることができます。 Free Unique Logo Creator http://logotypecreator.com/ 使い方はいたって簡単。トップページにあるテキストボックスに名前などロゴとなる文字を入力して、「Generate Logo Now!」をクリックします。今回は「GIGAZINE」で作ってみました。 するとこんな風に画面上に9つのロゴがざっと並んでくれるというわけです。 右上の「Generate logo」をクリックすると、気に入るものが出てくるまで何度でもロゴマークを変更できます。 右下に「Free!」とあるものは無料ダウンロードでき、「Uniqu

    無料でオリジナルデザインのロゴが誰でもカンタンにすぐ作れてダウンロードも可能な「Free Unique Logo Creator」
  • http://antlabo.jp/html5/visualstory_star/

  • 楽天から学べる日本的なWebアプローチ

    学べるところが多い楽天ページWebデザインに関わる様々な情報やノウハウが世界中で共有されているとはいえ、お国柄は存在します。Yahoo!でも、世界共通にみえる UI コンポーネントがありますが、アメリカと日中国ではアプローチが異なります。情報にメリハリをきかせているアメリカ。今の話題を中央にたくさん詰め込めるように工夫してある日。クリックをしなくても膨大な情報を消化することができる中国。ポータルサイトをひとことで言ってもやり方がいろいろあることが分かります。 各国の Yahoo! を見て「欧米はシンプルなのに、日中国はなんかごちゃごちゃしている」と感じた方はいるかもしれません。なぜそんな小さなところに情報を詰め込むのか、なぜページを整理しなのか、メッセージを絞ってメリハリをつけないのか、といった悩みを抱えるデザイナーもいるかもしれません。 日らしい忙しいデザインの代表例としてよ

    楽天から学べる日本的なWebアプローチ
  • みんなが利用するあの大手サイトの初期デザインはこんなだった : らばQ

    みんなが利用するあの大手サイトの初期デザインはこんなだった YahooGoogleWikipediaAmazontwitter……などの、ネット界の巨人ともいえるメジャーサイトがありますが、初期の頃のデザインって覚えているでしょうか。 もはや生活に欠かせないこれらのサービスの、初期デザインをご覧ください。 1. 2012 2. 2012 3. 2012 4. 2012 5. 2012 6. 7. 8. 9. 10. 11. GoogleにもYahooのように“!”が付いていたんだなとか、こんなAmazonでは買い物したくないとか、あまり変わってないと思っていたサイトでも結構違いがあるものですよね。 5年先や10年先には、どんな進化を遂げているのでしょうか。 First Designs of Popular Sites けいおん! 平沢憂 水着ver. (1/7スケール PVC塗装済

    みんなが利用するあの大手サイトの初期デザインはこんなだった : らばQ
  • 「公開一週間で10000PV」ダメブログを見直し月間10万PVのブログにするまでの激闘 | バンクーバーのうぇぶ屋

    僕を昔から知っている人はご存知かもですが、僕が以前書いていたブログはゼンッゼンだっれも見てくれないブログでした。その時のPVは覚えてませんが、確か月間1000PV無かった気がします。 確かに、このブログを立ち上げたのは7月。傍目からすればわずか5ヶ月しか経っていないように見え、「勢いあるねーっ」と言っていただけることが多いわけですが、別に技術力が何か特筆してすごいわけでも無い、ましてや職種はディレクターだけど経験が豊富なわけでも無い。そんな僕がブログを今の状態にするまでには、実は約1年以上の歳月を費やしてきました。 今日は、よくある記事になるかもしれませんが、その1年の歳月を使って自分が何をしてきたのか。さらにタイトルにあるよう、どうやって公開から一週間でPV1万超えさせることができたのかについて、僕なりの方法を一度まとめておこうかなと思います。 ちなみに、このブログは作って5か月が経ち、

  • Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個

    artless Inc. / mount inc. / standardimage他...全60件

    Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個
  • 実践して結果を出す、コピーライティングの技法 | Webコンサルティング

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • 最近リリースされた高品質なフリーのデザインフォント -2011年10月

    最近リリースされたものを中心に、高品質なフリーのデザインフォントを紹介します。 Novecento Sans -wide 個人・商用利用無料。 Patten 個人・商用利用無料。 Bino 個人・商用

  • クリエイティブ要素の高いポートフォリオサイトまとめ「20 Creative Examples of Portrait Usage in Web Design」

    TOP  >  WebDesign  >  クリエイティブ要素の高いポートフォリオサイトまとめ「20 Creative Examples of Portrait Usage in Web Design」 自身の作品やプロフィール、またデザインに関する想いなどを伝えることを目的としたポートフォリオサイトは、特に独立したデザイナーならぜひ制作しておきたいもの。そこで今回紹介するのは、クリエイティブ要素の高いポートフォリオサイトを集めた「20 Creative Examples of Portrait Usage in Web Design」です。 (Future of Web Design London 16th – 18th May 2011 | Home) 人のビジュアルが特化されたデザインを中心に、個性あふれるデザインが多数まとめられています。気になったものをピックアップしてみましたので

    クリエイティブ要素の高いポートフォリオサイトまとめ「20 Creative Examples of Portrait Usage in Web Design」
  • 確実に進化している!CSS3アニメーションで実装する10種類のナビゲーション

    Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul