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

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

webデザイン

8の倍数デザイン論とそれに伴ったブレイクポイント

従来、divや余白の大きさはデザインやコンテンツのボリュームによってマチマチですが、その都度値を決めるのでは無く、ある指針(ガイドライン)に沿って決める場合がよくあります。 その中でも、 「8の倍数デザイン論」と呼ばれる、全ての物を8の倍数でデザ…

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

カラースキーム|色彩計画

色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。 サイト制作において配色は非常に大事で配色次第で、そのサイトのイメージが決まってしまうと言っても過言ではありません。そのサイト…

必要なスキルセット

現状、web業界では様々な職種・肩書きがあり、場合によってはその会社独自の職種・肩書きなどもありますが、大きく区別すると以下のように別ける事が出来ます。 管理進行系 プロデューサー ディレクター 主な業務 企画立案、予算管理、クライアントとの打ち…

フレームワークとは?

フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションの…

モックアップの完全版 Facebook+Devices

Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…

この10年でwebサイトがどう変化したか

この10年でwebサイトがどの様に変わったか、が一目でわかる非常に興味深いサイトです。 10年前というとスマートフォンの普及も一般的では無く、多くのwebサイトはPCをターゲットにしていました。 なので、リンクの多くはテキストリンクだったり、リンク同士…

トンマナを合わせたバナー作り

トンマナ とは、「トーン&マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要で…

フォームのパーツにアニメーションを追加する「pretty checkbox」

チェックボックスやラジオボタンにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるラリブラリ「pretty checkbox」。 角を丸くしたり、カラーをつけたり、アニメーションをclassを加えるだけで簡単に実装できます。 lo…

デザインの参考になる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)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…

ボタン画像の変遷

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