WEB

css ニューモフィズム

ニューモフィズム(Neumorphism)について解説します。 ニューモフィズムの特徴 リアルな質感や深さを持つグラフィカルな要素を作り出すことを目指しています。 このアプローチは、フラットデザインとスキューモルフィズムの特徴を組み合わせて...
デザイン

配色の選び方

今回は配色について解説します。 配色に関わる要素 配色の選び方としては以下が一般的です。 色相環:同じ色相(赤・黄・緑・青・紫)の色を使用する。 コントラスト:対照的な色(例:黄と紫)を使用する。 モノトーン:同じ色のグレード(明度)の色を...
プログラミング入門

プログラミング入門(JS) – 環境構築

デザイナーでも「プログラミングを知らないからそれを考慮した設計ができない。」のようにプログラミングを知っておきた事があると思います。 そんな方のために、プログラミングの入門レベルからご理解いただけるようまとめていきます。 使用言語はJava...
WEB

CDN対応Webアイコンサービス

Web制作にあたってアイコンを簡単に挿入できるWebアイコンサービスを紹介します。 Webアイコンフォントのメリット CSSのみでサイズや色の変更が可能 class名などで簡単に呼び出せる ファイルのサイズを抑制できる などのメリットがあり...
ビジネス

見積もり作成サービス

フリーランスと起業に伴い、見積書や請求書などのビジネスに必要な処理が必要となります。 今回はそういったサービスの紹介をします。 無料から使えるサービスの種類 MISOCA Misoca(ミソカ) は見積書、納品書、請求書をWeb上で簡単に作...
WEB

CSS アニメーション(3) — CSS Transitionsを使った方法

CSSでアニメーションを実現できる1つの方法として、CSS Transitionsについて、基本文法を解説します。 とにかく動かしてみる グリーンの四角にマウスを合わせると動き出します。 See the Pen CSS transition...
WEB

CSS アニメーション(2) — CSS Animationsを使った方法

CSSアニメーションについて、前回の文法をもう少し細かく基本文法を解説します。 着目していただいたいのは、「書き方」,「設定プロパティの種類」の2点です。 各プロパティの詳細は個別に別の記事で紹介しますので、ここでは書き方の注意点を理解でき...
WEB

CSS アニメーション (1) — 概要 

今回はCSSアニメーションを始めたい方に簡単な概要を解説します。 順次別の記事で詳細をまとめますので、まずはざっくり要素を動かす流れを掴んで下さい。 HTML&CSSの基本的な学習を終えている人を前提で解説しています。 HTML基礎 ぐらい...
WEB

Webサイトの「動き」がもたらす役割

近年ン多くのWebサイトで動きのあるデザインが採用されています。 今回は目的を明確にし、今後の学習時に意識を置くべきポイントとしてまとめます。 「動き」の役割 大きく分けて2つが考えられます。 ユーザーの操作に連動した動きで、ユーザーの体験...
ビジネス

何で始めるの?はじめてのブログの作り方

ブログのこれから始めたいと考えいる方、ブログって何が良いか調べている方にブログのメリットと始め方を紹介します。 ブログの始めるとメリット ブログを始めるメリットとしては、 副業なら、広告収入が期待できる本業としてなら、自分の仕事や商品への集...