今回は「UIとUXとは?」から始まり「UI/UXデザインをする際のポイント」を50項目に分けて紹介します。
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から) まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線(border)で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
ハンコでアソブは、フリーの透過PNG消しゴムハンコ素材サイトです。 リンク、使用報告、クレジット記載不要/商用利用可です。 © 2024 ハンコでアソブ. All rights reserved.
Webサイトをデザインする際に重宝する、無料で高品質のアイコンやボタンなどのUIエレメントのまとめサイトが多数紹介されていましたので、自分用のブックマークも兼ねてシェアします。 レイヤー別に分かれているものもありますので、Webサイト
ミニマルなWebデザインをする時に気を付けたいなーと思ういくつかを注意書きとしてまとめてみました。ミニマルなWebデザインって簡単そうで一番難しいんじゃないかと感じてる今日この頃。もっとミニマルなデザイン上手になりたいです。最近ミニマルなデザインという言葉をよく目にするようになりました。 (昔からある言葉ですし、最近じゃなくて前から言われてたぞという人もいると思いますが…) 初めて聞いたときは、ミニマルなデザインってどんなデザイン?と思って検索したものでした。 ミニマル(英: minimal)とは、「最小限の」という意味である。 ミニマリズムとは美術・建築などの造形芸術分野において、1960年代のアメリカに登場し主流を占めた傾向、またその創作理論であり、最小限(Minimal)主義(ism)から誕生し、必要最小限を目指す手法である。装飾的な要素を最小限に切り詰め、シンプルなフォルムを
最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ&シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
休暇を利用して、MacBookにOfficeを入れたら、いろんなウェブサイトのフォントがメイリオになりやがりました。 個人的にメイリオは字面がもっさりしてて嫌いです。 ついカッとなって、 「日本のコーダーは、CSSのfont-family指定にメイリオとヒラギノ角ゴのどっちを優先しているのか」 という問題を本気で調べることにしました。 主な調査資料は、CSS Nite LP9 連動 第2回コーディングコンテストの応募作品です。 上位入賞者と、参加作品のNo.1〜20、それにCSS NiteLP9 / 9.2の一部出演者のサイトのfont-family指定を抜粋し、私も含めて計45人のコーダーの統計を取りました。 現場でコーディングをしている人ばかりなので、かなり信憑性のあるデータなのではないかと思いますが… 結果は追記以降で。 はい結果どーん。 圧倒的にメイリオが多い |||or
yuga.jsって? ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
絵がまったく描けないというひとでも、水彩絵の具風デザインを簡単に作成することができる、Photoshop無料デザインキット「The ...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く