新人デザイナーにオススメ！デザインの要素と原則への理解をアニメで深める動画 -Elements of Design
デザインのさまざまな要素と原則を非常にセンスのいいアニメーションでまとめたショートフィルム「Elements of Design」を紹介します。 「Elements of Design」は50秒ほどの動画で、テンポのいいアニメーションでデザインの要素と原則がまとめられています。 アニメーションが気持ちいいので、あっという間に見終わってしまいます。 Elements of Design 線（Line）から面（Plane）へ、 リズム（Rhythm）を生み出し、バランス（Balance）とスケール（Scale）を調整し、 テクスチャ（Texture）、フレーミング（Flaming）、グリッド（Grid）、カラー（Colour）など、デザインに大切なさまざまな要素と原則がまとめられています。
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
display: noneとレスポンシブ・ウェブ・デザイン
レスポンシブ・ウェブ・デザインとその設計を語る時にdisplay: noneが引き合いに出されることが多いなと感じる。その多用は設計ミスというような具合だ。そういうところは確かになくはないが、多用自体はCSSの貧弱さからくるHTMLの複雑さを意味するだけなのではないかと思う。 レスポンシブ・ウェブ・デザインはコンテンツを様々なデバイスで「収まる」ようにレイアウトを調整することではない。実装としてはそうなることは多いが、実際には多様なデバイスでのコンテンツの一貫性を確保するアプローチであると考えた方が適切なはずだ。その一貫性とはほぼコンテンツへのアクセス性と言って良い。様々な画面でそれを同じように確保するためには、レイアウトの調整だけではなく、構成部品の間引きや移動などが必要となる。 そういった一貫性の確保を同じHTMLを通して行う、とすると実装はほぼCSSに限られることになる。そして今のC
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
【楽天市場】ブルボン楽天ショップ お菓子・健康食品・新潟米・天然水を通販でご自宅に：ブルボン[トップページ]
日曜・祝日は定休日です。 土曜午後〜日曜日にいただいたご注文、メールでのお問い合わせにつきましては 月曜日の確認になります。 ■返品について 商品につきましては厳重な品質管理を行っていますが、万一品質に不都合がございましたら、送料弊社負担にて返品または交換をお受けいたします。 なお、お客様のご都合による返品・交換は、商品の性質上お受けいたしかねます。何卒ご了承くださいませ。 商品の返品・交換をご希望の際は、まずメールもしくはフリーダイヤルにてご相談ください。 ■個人情報の取り扱いについて お客様よりお預かりした個人情報は、厳正に管理し、不正なアクセスや漏洩事故の防止のため、適切かつ合理的なレベルの安全対策を実施いたします。 個人情報の取り扱いについて ■お支払い方法 ・クレジットカード・銀行振込・後払い決済・Apple Pay・前払い（コンビニ、郵便局ATM等）がお選びいただけます ・クレ
![【楽天市場】ブルボン楽天ショップ お菓子・健康食品・新潟米・天然水を通販でご自宅に：ブルボン[トップページ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/73de75a46ee6b84c0ffe0c641a7e9e2e1fa75234/height=288;version=1;width=512/https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbourbon%2Flogo%2Flogo1n.jpg%3F_ex%3D200x200)
IMAXシアター公式サイトのデザインがWeb0.1だった件
と言っていたので、ちょっとIMAXシアターについて調べてたら、ものすごいサイトにブチ当たりました。 「ものすごいサイト」。それはIMAXの公式ホームページ。 いきなりトップページが、 ヤバい！ 久しぶりに見たわこのテンション！ パッと気づいただけでも、 妙にボヤけた、クオリティ低い画像 微妙なケタずれ <title>タグがない 透過gif作成に失敗したギザギザ画像 センタリングされてない <FONT SIZE>タグ使いまくり もちろんIBMホームページビルダー など、Webデザイナーが見たら心拍数が上がるような小技が効きまくっています。 でも、このサイトの真の力は、こんなもんじゃなかったのです。 なんとですね……「THEATER」をクリックすると…… 10年ぶりに見たわこのギミック！ なにスルスル動いてんの！？ 意図がわからないアニメーション。まさにWeb0.1。 もう夢中です。マイケルと
Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ニュースのデザイナーの黒田・由衛です。 Yahoo!ニュースが2009年4月27日にリニューアルしました。今回のリニューアルでは、お客様に快適にサイトを利用していただけるよう最速でページを表示させることに重点をおきました。 お客様がウェブを閲覧するのは1日の中のほんの限られた時間です。その貴重な時間を割いてYahoo!ニュースに来ていただくわけですから、1ページでも多くの記事を「読みやすく」「ストレスなく」見ていただけるようにするのが、Yahoo!ニュースがお客様にできる最高のおもてなしだと考えています。そこで、今回のリニューアルでは、サイトデザイン側からのアプローチとして以下の2点の施策を行いました。 １
とっぷぺーじ
ついに、ヘテムルのキャラクターが決定しました！ 結果発表です！ついにキャラクターが決定しました！ さてさて、どんなのが新キャラクターに決定したのかな？ 決定したキャラクターはどんなのかな？ さっそくチェックだ！ いろんな人がヘテムルを使って、 いろんなホームページをうくっています！ ヘテムルを使ってるいろんな人に聞いたヘテムルの感想は こちらでチェックできちゃいます！
Web 2.0のデザインパターン | S i M P L E * S i M P L E
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。 さて、ではポイントをば。 ■ グレーの次はグリーンだ！ 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命！ Rounded Cornersは新しい標準す。 ■ 「無料！」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は？素材集す
デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌
maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
矢野りんのWebレイアウト講座
トピックスTopics 2024年04月01日 お知らせ 代表取締役社長交代のお知らせ 2024年02月27日 ニュースリリース マイクロメイツ、新入社員教育に適したeラーニングコンテンツ「ビジネスマナー＆Microsoft 365活用術」を提供開始～ビジネスパーソンとして必要なスキル習得をサポート～ 2023年12月05日 ニュースリリース マイクロメイツ、「コールセンターのプロが教える 電話応対スキル向上ガイド」を提供開始 ～コールセンターや社内外の問い合わせ窓口における 教育負担軽減と電話応対品質維持・向上を支援～ もっと見る マイクロメイツとはABOUT MICROMATES 私たちマイクロメイツは、お客さまのIT投資効果を最大にするための各種サービスを一気通貫で提供しています。 基幹システムの導入などの際に、お客さまのご要望をヒアリングし、適切な教育計画の提案から、各種教育コンテ
Yahoo!のトップページ検索窓のように画面遷移無しに検索タブを切り替える方法を教えてください。…
Yahoo!のトップページ検索窓のように画面遷移無しに検索タブを切り替える方法を教えてください。（はてなのトップページも同じような仕組みですね） javascriptとCSSを使用して実現しているのは分かるのですが・・・ またこちら（http://nais.to/~yto/tools/css_tabs/）の「CSS と JavaScript でタブ切り替え」は一度参考にして試しましたが、onloadの仕組みを使用しているので一瞬画面が崩れてしまうようです。 ということで、画面の読み込み時にレイアウト崩れの恐れがない方法が一番知りたいです。
【レビュー】WebデザイナーのためのAjaxツール、Adobeの「Spry framework」とは? (MYCOMジャーナル)
米Adobe Systems(以下、Adobe)は、同社の技術者向けサイト「Adobe Labs」で、5月11日、Ajax向けのフレームワーク「Spry framework for Ajax」を発表した。"JavaScript library for web designers(WebデザイナーのためのJavaScriptライブラリ)"と銘打たれたこのフレームワークを利用すれば、高品質な演出をWebデザイナーが手軽に施すことができる。 ここでは、技術的な観点を交えてSpry frameworkの魅力を紹介してみよう。 フレームワークの種類 フレームワークとは、プログラミングを行う時に土台となるプログラムのこと。Ajaxの場合は特にブラウザ間の依存性解消などの理由で、フレームワークが非常に重宝されている。 数あるAjaxフレームワークの中で、現在最も多く採用されているのが proto
Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた - 日経トレンディネット
次期Windows OS「Vista」に標準搭載される「Internet Explorer 7（IE7）」（日本語版）のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている（笑）。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE
webデザインに使えるメニュー・アイコン：Goodpic
This shop will be powered by Are you the store owner? Log in here
ペインタにも負けず イラストレーターにも負けず メモリ不足にも負けはしない！
全国一億六千万の(根拠無)フォトショッパーの皆様ようこそ。 お絵かき歴20年以上、CG歴5年弱の若輩者ですが、皆さんの為になれればと(なれません)フォトショップの為のお絵かきアドバイザーに立候補してみた次第です。とか言って、私も人に教えられることの方が圧倒的に多いです。ええ。 便利ツールのダウンロードや、お絵かきの参考になりそうなサイトへのリンクも載っけてみました。 初心者の為の画像基礎講座 本当に基礎的な事しか書いてません。ここに書いてある事は最低限の事です。これが解ってないと、他のコンテンツを読んでもは〜さっぱりさっぱりで訳解らんと思います。 ■画像形式について■ .jpgとか.psdとか.tifとか.gifとか.bmpとか、いっぱいある画像ファイル形式。何がどう違うのかについて解説します。内容は非常に大ざっぱな為、不正確であります。（おい） ■画像モードについて■ フルカラーとか
r202.org: こんなクライアントには気をつけろ！（Webデザイナー編）
なんでも借入をたくさんするというのはデメリットが大きい、これは誰もが知っていることだと思います。あまりにも借入を他社からたくさんしていると、それだけで多重債務になってしまって自己破産をしてしまう…もしくは他社借り入れが多すぎると借り入れ自体ができなくなってしまう、これはその通りです。ですからちゃんと考えている人ほど、借金をたくさんしないようにしていますし、いろいろなところから借り入れをしないようにしています。 この借金ですけれども、実はカードローン（モビット）だけではなく住宅ローンも関係しています。まさか住宅ローンをいろいろな銀行から借りるという人はいないと思いますが、カードローンを借入しながら住宅ローンを借入するという人はいると思います。この場合審査に通らないということはないのですが、全く何も借り入れをしていない人に比べて通りにくくなっているのです。たくさんの会社からカードローンを借入し
ITmedia News：ネットサービス“そっくりさん”登場のなぜ (1/3)
既存の人気サービスに、デザインも機能もよく似ているサービスが最近、次々に登場している。似せた側は「既存サービスと同じデザインの方が使いやすい」と主張。模倣された側は法的手段に訴えることもなく、事実上黙認する場合がほとんど。背景には、ネットサービスで模倣は“お互い様”という暗黙の了解もありそうだ。 「ちょっと似すぎでは」――ライブドアが2月8日に公開したQ＆Aサービス「livedoor knowledge」が、一部ネットユーザーの驚きと反発を買った。デザインが米Yahoo！のQ＆Aサービス「Yahoo! Answers」にそっくりだったためだ。 livedoor knowledgeのデザインについてライブドアは「先行他社の似たサービスを研究し、ユーザーの視点から見て『良い』と思った部分は踏襲した」と、他社サービスを真似たことを認めている。 同社はSNS（ソーシャルネットワーキングサービス）や
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
