[webデザイン]規則性と不規則性を使いこなす
見やすいレイアウトには規則性がある webデザインに限らず、見やすくてわかりやすいデザインをするためにはある原則があります。デザインの4つの基本原則等と言われているようで、これを踏まえていればしっかりとしたデザイン＝設計が出来るというわけです。 デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 タイポグラフィが苦手な人におすすめしたい私のやり方 | ウープスデザインブログ (デザイナーまめこ) 上記のような記事が参考になります。また、デザインという言葉の普通の印象からは外れると思いますが、マーチャンダイジングにおいても関連した話題があったので紹介しておきます。 売場の陳列を考える – NAVER まとめ 規則性を用いてデザインする こうしたことからデザインにおける規則性を掴むことができれば、ある程度法則に則って作るだけでも美しかったり、わかりやすいデザイ
![[webデザイン]規則性と不規則性を使いこなす](https://cdn-ak-scissors.b.st-hatena.com/image/square/afaf6d936d89812b2c4dd4c9957808a2fe1c6474/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Fdesign-regularity-irregularity-01-150x150.png)
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
![[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/9068d7a52b34c4de9a5be296ee0a927a28903d59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fdesign-rounded-corner-13-150x150.png)
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで
スマホのテキストが美しくみえる一手間♥読まれるテキストのつくり方 : ハンゲームで働くWeb Designer Blog
コンニチハ！ 料理もひと手間入れる方です。 おがさわらです。 今日のテーマは「文字」について。スマートフォンの文字の使い方をWEBデザインの視点から見てみたいとおもいます。 文字に大切な３つのポイントスマートフォンでは文字の可読性は重要になってきます。スマートフォンの使用環境は移動中が多く、PCでのWEBページの表示よりも、 視認性や操作性を考慮していくことがより大切になってきます。 たとえば、歩きながら画面を見たとき、ユーザーは周囲に気を配りながら 歩くことになるので、PCほどじっくりと注意しながら見ることはなくなると思います。 そういったことから、スマートフォンでの文字の扱いにはフォントサイズは、全体的に大きめのにラインハイト（行間余白）は、PCよりも多めにコントラストをはっきりとさせることが大切になってきます。 1.フォントサイズ図１は各種フォントサイズ。 それをスマートフォンで表
ボタンだって主張したいの♥ボタンデザインの基礎の基礎 : ハンゲームで働くWeb Designer Blog
コンニチハ！ バレンタインはダンナにブラックサンダーをあげるつもりです。 おがさわです。 今日のテーマは「ボタン」デザインについて。 スマートフォンWEBページでの「ボタン」デザインの大切なこととして。ボタンの種類と色ボタンを置く位置の二つについてお話したおと思います。 ボタンの種類と色 ボタンのデザインはサイトを作り始める時に大きく分けて３種類用意しておけば、たりると思います。 仮にここでは ソフト、ポジティブ、ネガティブという名前をつけてみます。それぞれの意味は… ・ソフト通常のフォームや補足的な意味のリンクに使用しています。結構たくさん使う機会があります。例（送信、もっと見る、○○とは、）など。 ・ポジティブ運営者側がよりオススメしたい内容のリンクの場合に使用しています。ユーザーに活発に押してもらいたいので大きめに目立つデザインだったりします。例（作成する、登録する、購入する、PLA
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
イラレでWebデザインをされる方にお願いしたい7つのこと。
普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、 ちょっとだけ気に留めておいて欲しいことがあります。 １．色モードはRGBで。 普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。 でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、 最初からRGBで作ってください。埋め込む画像も同じです。 ２．どこがデバイスフォントなのか分かるように指示を。 紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか 「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、 判断に困る
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
Webサイトで写真を使う時に気をつけたい基本の3つ / Maka-Veli .com
1 人物写真、並べる時は顔のサイズで合わせる 人物の写真が並んでいる時、かつ人物そのものを紹介する時なんかにやると良い感じ。 撮られた写真をそのままリサイズして載せるだけでなく、一工夫。 並べるなら人物の顔サイズを基準にして並べた方がキレイです。 どうしても顔サイズで合わせる事が難しい場合でも、例えば人物の足、腰、肩、顎、目、なんかのラインを揃えるだけでもキレイに見えます。 （元々の顔が大きい、小さいの差はあるので、そこは現実になるべく合わせる方向で・・・） 未調整 こっちは写真をそのままリサイズして調整 調整版 こっちは顔サイズで合わせてリサイズ。不足している部分が出るんですが、そこは伸ばしたり合成して誤魔化してます。 あ、ちなみに人物でも「シーン」として撮影されている写真だったり、メリハリや動きをつける為にあえて大きさバラバラにするのもカッコイイので表現したいコンセプト次
パフォーマンスは技術課題ではなくデザインの課題
人気デザインギャラリーサイトから幾つかモバイル向け Web サイトのパフォーマンスを検証してみました。以下が各サイトのリクエスト数とファイルサイズになります。 FELISSIMO 500色の色えんぴつ: 81リクエスト / 1.94MB 旅館 大村屋 55リクエスト / 1.52MB UR オンラインストア 90リクエスト / 705kb JiNS PC 78リクエスト / 1.39MB らでぃっしゅレシピ 69リクエスト / 987kb 明治北海道十勝カマンベールチーズ 54リクエスト / 1.12MB いずれもスクリーンショットでは素晴らしい見た目で使いやすそうに見えますが、中身はかなり重いことが分かります。1MB 以下に抑えているサイトもありますが、それでもかなりリクエスト数が多いのが分かります。リクエスト数が多いということは、回線が安定しない場合、すべての要素が読み込まれない可能性
最近見かけるフラットなデザインにぴったり、各ソーシャルサービスとシェア用のアイコン46種が揃った無料素材
アイコン全46種 ダウンロードできるアイコンのフォーマットはPNGで、サイズが16, 24, 32, 48, 64で、32, 64にはRetina用もあります。 アイコンの利用にあたっては個人でも商用でも無料で、クレジットやバックリンクの必要はない、とのことです。ただし、配布や販売は禁止です。
クリック率の高いテキストリンクの色は？【2013年版】 | ウェブ力学
前回との比較 前回の調査から2年半が経過している訳ですが、今回調べた中でリンクのデフォルト色を使っているサイトはありませんでした。リンクの色はデフォルト色より、やや弱い青色にするというのが浸透してきたように感じます。 NAVERとlivedoorのリンク色が同じになっていたのは経営統合の影響でしょうか。 また、「はてブ」や「にこにこ動画」のように青系でない色を使っているサイトもありました。はてブはリニューアルによって大きく変わったのですが、リンクの色を黒色ベースにしていたんですね。調べるまで気づきませんでした。 最適なリンクの色は？ 「リンクは青色」という認識は多くのユーザーに浸透しているので、一般的には青色をベースにするのが無難と言えます。具体的にはデフォルト色だと少し青が強すぎるので、やや”青”を弱くした色がいいでしょう。 但し、サイトのジャンルによっては青色を避けるというのも一つの選
サイト制作の参考にしたい！Wordpressでつくられたウェブサイト50選
WordPressでサイトを作るときに、参考になるWordpressサイトはないものかと思ったことが一度はあるはずです。 WordPressでつくられたサイトからはデザイン・機能・運営方法まで参考になることが多いのではないでしょうか。そこで今回はWordpressでつくられたサイトを有名なところから50個ピックアップしてまとめました。後から読み返しやすいようにサイトのタイプ別に分類しています。 ※2016年3月末時点でWordpressでつくられたサイトであることに注意してください。 企業サイト・組織サイト 株式会社カカクコム 価格ドットコムなどを運営する株式会社カカクコムのコーポレートサイト。 http://corporate.kakaku.com/ クックパッド株式会社 クックパッド株式会社のコーポレートサイト。 https://info.cookpad.com/ 株式会社ベクター オ
トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。
東京都でフリーランスデザイナーをしているイシジマミキのブログです。制作実績やその作り方とか。あと運営しているコワーキングスペース「こけむさズ」に関して。書評などのレビューもします。 1月29日に「スマートフォンデザインでラクするためには」という本を技術評論社さんにて書かせていただきました。 表紙カッコイイ！！！ いつも書いているブログ記事の豪華版 このブログではよく作ったアイコンやロゴ、Webサイトの製作過程を紹介しています。 なぜそれをするのかというとデザインでは「何を考え、どう決断し、どう表現したか」が大切だからです。 「スマートフォンデザインでラクするために」はその「何を考え、どう決断し、どう表現したか」をより掘り下げて232ページ、6万文字弱使って書いています。 いやー豪華ですねー。死ぬかと思った！ 画面に向かうな 「画面に向かうな」とはわたしがよく行うデザインの模索方法です。これ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
365·(wm)完美体育-官方网站-App Green Games
我公司主要经营不锈钢罐、油罐、各类化工金属容器、搅拌调和罐、反应釜、石油化工管道、钢结构！ 让您定制省心
『Fireworksを使った大規模ウェブサイトのデザイン設計』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ittetsu Matsuoka
「シュッ」とか「チン」とかのフリー音源集