webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

webデザイン

デザインの参考になるUIキットやコンポーネント

こういった素材を上手く使って作業の効率化を計りましょう。 素材はどれも無料ダウンロードが可能ですが、ダウンロード元はほぼ全て英語なので、注意してダウンロードするようにしましょう。 pixelbuddha.net photoshopvip.net photoshopvip.net https://gra…

デザイナーやディレクター向けのデザインツール -VisBug(Chromeの機能拡張)

VisBugはChromeの機能拡張で、ブラウザに表示した既存のページのデザインなどをその場で検証・編集できます。色を変えたりマージン・パディングの値を変えたり、テキストを編集したりと、様々な事がこの拡張機能を入れるだけでchrome上で出来る様になります…

webサイトの主なレイアウト

レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるの…

ワイヤーフレーム の作成

ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…

フリー素材のロゴデータを編集する

ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net

配色の基本

メインカラー その名の通りサイトの印象を決定づける主役の色です。 ベースカラー 最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 アクセントカラー 全体の5%…

Google Fonts の使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

ヒーローヘッダーを使ったサイト制作

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…

ボタン画像の変遷

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。 グラデーション=光と影 ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデ…