Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
これからIllustratorを始めてみようという人のための基本操作とかいろいろ
Illustrator を使い始めるにあたっての、予備知識や基本操作をまとめてみました。Illustrator って簡単ではないと思うんですけど、Webデザイナーなら使いこなしたいソフトウェアのひとつですよね。これからWebデザインで Illustrator を使ってみようという人が、少しでも Illustrator に親しんでくれればいいなーと思って書きました。 私はいつも Web制作の時には、Photoshop と Illustrator を使っています。ずっと前、Webデザインを勉強しはじめた頃、私は Illustrator より先に、まず Photoshop から使い始めました。そしてそのあと初めて Illustrator に触ったとき、Photoshop よりもとっても難しく感じて、基本操作もなかなか覚えられなかった想い出があります。 もちろん ベジェ曲線 や パス など、Ill
いまさらだけど、Webのイケてないところについて - Tortoise Shell
Webは面倒くさくて、本当にイケてない。 わたしはWebデザイナーとして働いているので、Webについての色々な事を当たり前だと思い込んで何の疑問も抱きませんでした。 しかし、冷静に考えてみると、おかしいことだらけだと思います。 Webデザイナーは、デザインするのが仕事です。 コンテンツの魅力を最大限にエンドユーザーに伝えるべく、情報をデザインしています。 つまり、Webデザイナーは「コンテンツの質を高めること」に注力しなければならないのです。 しかし、現状はどうでしょうか。 人間ではなく検索エンジンに優しいWebサイト 本来ならデザインに集中すべきなのに、なぜブラウザの差分に振り回されたり、SEOを気にしながらWebコンテンツを作らなければならないのでしょうか。 ブラウザもSEOも「手段」であるはずなのに、わたしたちはいつもその「手段」に振り回されています。 特に、SEOなんてひどい話だと
jQuery 642 プラグイン：skuare.net
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方
Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing Bootstrap and the Bootstrap Grid System 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 3の特徴 Bootstrapのダウンロードとインストール Bootstrapのファイル構成 このチュートリアル用のファイル構成 デバイス用のclass コンテナの実装と配置 グリッドの実装 オフセッ
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
【CSS】決定版！リセットCSS総まとめ
HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。
1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
無料で使える！和風な日本語のフリーフォント37選
目次 やわらか・繊細系の日本語フォント 12種類 力強い太文字系の日本語フォント 8種類 手書き・毛筆系の日本語フォント 6種類 レトロ系の日本語フォント 3種類 コミック系の日本語フォント 2種類 民芸風の日本語フォント 2種類 変わり種の日本語フォント 4種類 フォントを利用する際は必ず規約の確認を 商用利用の可否や条件については調査し記載していますが、商用利用のみ有料版の購入が必要だったり、配布元への連絡だったりする必要なケースもあります。ご利用の際は、必ずフォント配布元サイトで利用規約をご確認ください。 1. やわらか・繊細系の日本語フォント 12種類 落ち着いた優しいデザインにマッチする、繊細なフォントを集めました。癖が強くなく使いやすいものが多いので、重宝できます。 イマジン・ヨコハマフォント イマジン・ヨコハマフォント ひらがな・カタカナに加え、横浜市に関連する漢字が使えます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Loading...
