本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
2013年1月6日 著 ひょんなことから、著者の渡辺竜さん（@rriver）より『レスポンシブWebデザイン 制作の実践的ワークフローとテクニック』をいただきました、ありがとうございます。基本編、準備編、実践編の3部構成で、実際に手を動かしページを作るところまでカバーしながらも、どちらかといえばレスポンシブWebデザイン（以下「RWD」）の考え方や発想に比重が置かれており、これから学び始める人向けには良書だと思いました。何かと動きの速い分野だけに、時間の経過に伴う影響を受けにくい内容・構成というのは紙媒体の書籍として正解だと思いますし、勤務先でもデザイナー・ディレクターの別を問わず当面の教科書として使えそうです。以下、個別に気になったところなど： 一つの手法（p.11）、選択肢の一つ（p.18）のようにRWDを捉えているのは、個人的に安心感、信頼感を覚えます。 p.21に出てくるのですが、
All Microsoft Office Windows Surface Xbox Deals Support Software Windows apps OneDrive Outlook Skype OneNote PCs & Devices PCs & tablets Accessories Entertainment Xbox games PC games Windows digital games Movies & TV Books Business Microsoft Azure Microsoft Dynamics 365 Microsoft 365 Enterprise Data platform Microsoft Advertising Developer & IT .NET Visual Studio Windows Server Windows Dev Center
Websites today are being consumed across a wide range of devices, and with all the new tablets and PCs optimized for Windows 8 coming to market, this trend will only accelerate. Websites that can gracefully adapt to different display characteristics and user input methods offer the best possible experience for the widest audience. Here we'll dive into strategies for using features in Internet Expl
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
2012年11月13日 著 レスポンシブWebデザインのメリット、デメリット比較まとめ - Photoshop VIPという記事がかなりはてブられているようなのですが、個人的に「そこはそうじゃないんじゃないかなぁ」と思うところが複数あったので、覚え書きしておきます。もっとも、当該記事の元ネタはThe opportunities and challenges of responsive design | Webdesigner Depotという記事なので、そちらに対する違和感、ということになるかもですが。 メンテナンスが楽？ レスポンシブWebデザイン（以下「RWD」）のメリットの筆頭に挙げられているのがこれなんですが、必ずしもそうとは言えないと思います。CMSのような仕組みの動いている環境であれば、デバイスごとに複数のHTMLファイルを出し分けていたとしても、RWDのようなワンソースマルチ
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
It’s that time of year again, where we look into our crystal ball to see what will be the hot trends in web design for the upcoming year. It’s no secret that trends come and go, with some hanging around longer than they should. (Yes, splash page, I’m talking about you.) But trends are a necessity in the development and growth of our craft. Trends are born, improved upon, and often spawn other tren
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
CSS3だけでWebサイトのUIをMacPro的なメタル調にしてみた
百聞は一見にしかず。デモこのエントリーはIEだと面白くないですよ! 文字サイズを大きくしたり小さくしたり、キャレットで文字列を選択してみたりして、これが画像でないか確めてみましょう。一切画像ファイルは使ってないよ! <2010/05/28 13:00追記> Chromeだとwindow.onloadイベント処理が動作してないようなのでハンドラをonmouseoverに変更。マウスポインタを重ねるとloading...部分が動作するはず I ♥ Internetloading... Profile Blog Twitter Bookmark 趣旨見せてもらおうか、W3Cの新しいCSSの性能とやらを 先に結論無理にすべてCSS3だけで表現を完結させようとすればするほど一昔前のブラウザ別ハックみたいな事しなきゃいけなくなりますよ。 ちなみにBloggerにデモ用に直にHTML記述してみたんだけど
通常のロールオーバー 動作テスト サンプルのソース <p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p> 説明 img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える [New]グループ化されたロールオーバー 動作テスト テキスト。 サンプルのソース <p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p> 説明 img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。 現在のページ
３年前に Doug Bowman が Google に参加したニュースを聞いたときは、意外な組み合わせだと感じると同時に今後どう Google が変化するのか楽しみになりました。彼がどのように Google に関わったかどうかは知りませんが、表に出る出ない関係なく様々なレイヤーにおいて影響を及ぼしたと思います。そして、先日 Goodbye Google というエントリーで Google を去ることになったと告げています。次どのような活動をされるのか楽しみではありますが、エントリー内には気になる部分も幾つかあります。 彼は文中で「エンジニアばかりの企業になると、問題をいかに処理 (engineering) するかが話の中心になる」と書いています。主観をすべて省いてデータから答えを探るアプローチ。Google はどの青が良いのかインハウスで決めず41種類の青を使って、利用者がどの青を好むのかデ
For beginner web designers – design tutorials really help to understand the basic knowledge about web design!, Here is a collection of 27 layout design tutorials that will help you with designing a decent looking website. Some of them are really good!, I’ve previously Showcased 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts, this post is the continuation of that article
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
