5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

webデザイン関連用語のまとめ

Posted at

これからwebデザイナーになろうとしている人や、またはこれってどういう意味だっけとなってしまった人へデザイン用語や知っておくといい関連用語をまとめれたらと思い作成しました。

#デザイン用語

##レスポンシブデザイン
一つのファイルで様々なデバイス(pcやスマートフォンなど)の画面サイズに合うように作成することをいいます。

##フラットデザイン
シンプルかつ平面なデザインのこと。
スキューモーフィズムの事態から少し経ってあと、数多くの企業が採用しているデザインになります。

##マテリアルデザイン
フラットデザイン2.0とも言われているgoogleが提唱したデザインです。
直訳すると物質的なデザインとなり、すなわち物理的な法則にしたがって作られたデザインということになります。ベースはフラットデザインと同じなのですが、違うのは現実世界と同じように光や影、奥行きや重なりなどを取り入れたデザインのことをいいます。

##グリッドレイアウト
画面やページを格子状に分割して組み合わせるデザイン方式のことです。

##リキッドレイアウト
グリッドレイアウトは横幅を固定するのに対して、このリキッドレイアウトは幅をリキッドというように
液体のように流動的に変化させてどの画面サイズでも適切なレイアウトで見れるようにするデザインのことです。

##ミニマルデザイン
ミニマルは「最小の」という意味、余計な装飾や要素を限りなく少なくしたシンプルなデザインのことです。

##UI(ユーザーインターフェース)
ユーザの視覚にふれる全ての情報がUIに当てはまります。
簡単にいうと見た目の部分にあたります。

##UX(ユーザーエクスペリエンス)
ユーザが製品やサービスを通じて得られる体験のこと。

##ユーザビリティ
特定のユーザが特定の利用状況下で特定された目標を達成するために用いられる際の、有効さ、効率及び利用者の満足度合いのこと

##アクセシビリティ
障がいを持つ人やもしくは誰でも閲覧しやすいような作りのこと

##スキューモーフィズム
以前のiphoneで採用されていたデザイン手法です。
デザインに立体性を持たせ、リアリティのある表現を重視した作りになっています。

##モバイルファースト
cssを書く際にpcのスタイルから書くのではなく、スマホのスタイルから書くことをいいます。
またはスマホでストレスを感じることなく操作できるデザインのこととしても使われます。

##ファーストビュー
ブラウザでwebページを開いたときに表示される領域のことです。

##アイキャッチ
ファーストビューと同じ意味ですが、ファーストビューは全体のことをいうイメージですが、
アイキャッチは画像などに対して使われています。(違っていたらすみません)

##LP(ランディングページ)
バナー広告やリスティング広告などを経由して訪問者が最初にアクセスするページのことをいいます

##トンマナ
トーン&マナーの略。色味や雰囲気、フォントなどに一貫性を持たせることです。

##ワイヤーフレーム
設計図のようなもので、このワイヤーフレームの段階で骨組みを固めておくとその後の作業がスムーズになります。

##パンくずリスト
サイト内でユーザが今どこにいるのかを分かりやすくするためのリンクのことを言います。
由来は話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていったというお話からという噂です。

##ドロップダウンメニュー
項目をクリックまたはホバーするとビヨーンと伸びて詳細の項目を表示させることができるメニューのひとつです。

##アコーディオンメニュー
ドロップダウンとほぼ同じですが、こちらの場合は縦に並んだメニューの一つを押した時に、
メニューの感覚が開いて出てくるもとがアコーディオンメニューになります。

##ハンバーガーメニュー
スマホやタブレットでよく見られますが、ハンバーガーのような見た目の3本線のメニューで、
タップするとメニュー項目が表示されます。

##ヒーローヘッダー
写真・動画などを画面いっぱいに使って表示させていく手法のこと。
ユーザにインパクトのある印象を残すことができます。

##パララックス
示唆効果を適用したデザインのこと。
手前と奥とでスクロースする速度に差をつけることによって、奥行きや立体感を表現させることができます。

#コーディング用語
##HTML(エイチティーエムエル)
Hyper Text Markup Languageの略でWebページを作るためのマークアップ言語です。

##CSS(シーエスエス)
Cascading Style Sheetsの略でwebサイトの見た目の装飾を加えるスタイルシート言語の1つです。
スタイルシートとも呼ぶこともあります。

##JavaScriptI(ジャバスクリプト)
HTMLやCSSとは違いwebに動きをつけることができる言語です。
名前は見ていますがJavaとは全く別物の言語です。

##margin(マージン)
余白を枠の外側に作成する

##padding(パディング)
余白を枠の内側の作成する

##width(ウィドゥス、ワイズ)
横幅のこと。
ウィドゥス、ワイズどっちでも通じるが、web業界はウィドゥスの方が多い印象。

##height(ハイト、ヘイト)
縦幅のこと。
ハイト、ヘイトどちらでも通じるが、widthと違いこちらは圧倒的にハイトが多い印象。

#マーケティング用語
##SEO(エスイーオー)
Search Engine Optimizationの略。検索エンジンの最適化のことをいいます。
これをしっかりと行っておくと検索結果が上位に表示されるようになります。

##コンバージョン
webへアクセスするというだけではなく、商品購入、問い合わせ、資料請求、会員登録など、そのWebサイトにおいて獲得できる最終成果のこと。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?