webサイト制作の勉強|2017月7月クラスブログ

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

webデザイン

今のトレンドを知る

photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net

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

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

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

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

視差効果(パララックス)

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

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

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

今のトレンドを知る

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事OKという訳でないですが、選択肢の1つとして知っておく事はとても大事です。 特にポートフォリオなどに「ツカミ」として、最新のトレンドを取り入れる事で、面接などでアピール出来るの…

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

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

Wirify-見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス

見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス、「Wirify」 使い方もいたって簡単です。 1. 「Wirify」のサイトにアクセスし、「Wirify by Volkside」をブラウザのブックマークツールバーに入れる。2. ワイヤーフレームにしたいサイト…

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…

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

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

SVGの使い方

SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能…

ボタン画像の変遷

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

レスポンシブ対応の高品質なHTMLのテンプレート

coliss.com

ポートフォリオ制作に必要な「ツカミ」

ポートフォリオを制作する際に、もちろん中身の作品の質も大事ですが、ポートフォリオ自体の見た目も非常に大事です。特に面接などではポートフォリオの中身をじっくり見る時間が無く、トップページのパッと見の印象で評価されてしまうケースも珍しくありま…