アイコン 2017年9月19日(火曜日)

画像

こんにちは、今週のブログ担当の若井です。

今回はコンプレックスハーモニーという配色についてです。
コンプレックスハーモニーとは、自然連鎖に従った配色のナチュラルハーモニーとは逆で、明るい方を青みの色で、暗い方を黄色みの色で配色したものです。

例を作成しました。
ポイントは、ナチュラルハーモニーとは違い、近い色相で組み合わせなくても良いところです。

自然の中では見慣れない配色なので、印象的な配色ができるかと思います。

アイコン 2017年9月11日(月曜日)


CLICK!

みなさまこんにちは、原田です。
今週は徐々に線が出てきて文字や絵を描画するアニメーションを作ってみました。
イラストにしてみたり、線の出し方を変えてみたりすると、他にも面白いアニメが作れそうですね!

アイコン 2017年8月28日(月曜日)


CLICK!

こんにちは、今週は長谷が担当します。

季節の移ろいは早いもので、もう8月後半になりました。
Webデザインも日々、多くの技術が生まれていくのでどんどん勉強していかなくては追いつけません。
“移ろい”とかけて、背景の色味が少しずつ変化していくアニメーションを実装してみました。グラデーションの移ろいが美しいアニメーションです。

シンプルですが鮮やかなので、引き立たせたい箇所になど使用してみると良いかもしれません。

アイコン 2017年8月21日(月曜日)

画像

こんにちは、今週のブログ担当の若井です。

今回はナチュラルハーモニーという配色についてです。
ナチュラルハーモニーとは色相の自然連鎖に従った配色のことです。
例えば自然の草は、光の当たっている明るい部分は黄色みがかって見え、影の暗い部分は青みがかって見えます。
この法則に従って、明るい方を黄色みの色で、暗い方を青みの色で配色したものが、ナチュラルハーモニーです。

左に例を作成しました。
ポイントは、近い色相で組み合わせることです。

ナチュラルハーモニーは、調和のある落ち着いた配色になると思います。

アイコン 2017年8月14日(月曜日)


CLICK!

こんにちは、今週の担当をします原田です。
CSSには「グラデーション」を作る技術があります。
グラデーションといえば段々と色が変わっていくのをイメージすると思いますが、設定を工夫すると縞々模様も作れます。
今回は夏らしくトリコロールカラーにしてみました。
ウェブサイトの背景やリンクボタンとしても応用できますね!

アイコン 2017年8月7日(月曜日)


CLICK!

こんにちは、今週は長谷が担当します。

早いものでもう8月になりましたね。
猛暑日がちらほらある中、皆様どの様にお過ごしでしょうか。
今回はcssで実装できる波のアニメーションを作成しました。 目からでも、少しでも涼んでいただきたいと思い作成しました。
こちらは実務でも応用してデザインに取り入れそうなデザインです。

アイコン 2017年7月31日(月曜日)

画像

こんにちは、今週のブログ担当は若井です。

今回は色の配色の比率についてのお話です。

使用する色は、ベースカラー、アソートカラー、アクセントカラーの3つに分けます。
ベースカラーは、最も大きな面積を占める色で、背景などに使用されることが多いです。次に、アソートカラーは、ベースカラーの次に面積を占める色で、ウェブデザインではテーマカラーとなる色として使用すると良いかと思います。最後に、アクセントカラーは、名前の通りアクセントとなる色のことで、ポイントで目立たせたい部分に使用されます。
それぞれ、70%:25%:5%の比率で配色するとバランスが良く見えます。

これからを踏まえて、バランスの良いデザインを考えていきたいです。

アイコン 2017年7月24日(月曜日)


みなさんこんにちは、原田です。
今回は水面反射しているような画像加工をご紹介します。
左の元画像に、反転させたりぼかし入れたり、背景を付けると・・右のような仕上がりになります!
素材を生かして加工を工夫すると、より充実したデザインが作れると思います。

アイコン 2017年7月18日(月曜日)


CLICK!

こんにちは、今週は長谷が担当します。

今週はテキストアニメーションのお話です。
ページ内のテキストにマウスポインタを重ねると、それぞれ様々なアニメーションを表現します。文章が多いページで、引き立たせたい箇所にこの様な工夫をすると、見ている方も楽しいですね。
小さい工夫を重ねてより見応えのあるサイトを作っていきたいです。

アイコン 2017年7月10日(月曜日)


CLICK!

こんにちは、今週のブログ担当の若井です。

前回、RGBでの色の表記のお話をしました。
例えば、赤は#ff0000というような表記で、値を変更し色を指定します。

そのRGBですが、JIS規格で規定されている慣用色名269色と対応させることができます。
左に例を作成しましたのでご覧ください。

慣用色名とRGB値をセットで覚えられると、デザインの指示や作成時に色のズレがなく進められるのだと思います。

アイコン 2017年7月3日(月曜日)


本日は原田が担当いたします。
今回は画像をポリゴン風に加工したものをご紹介します。
ポリゴンとは「多角形」という意味で、3Dグラフィックの分野でも立体形状を表現するために使われる三角形や四角形を指す用語だそうです。
中央の普通の写真のままのペンギンと比べて、イラストのような感じが出るでしょうか?ウェブサイトの中でも効果的に取り入れると面白いデザインが作れると思います。

アイコン 2017年6月26日(月曜日)

画像

CLICK!

こんにちは、今週は長谷が担当します。

続々と梅雨明けをし、あっという間に夏が来ますね。

さて今日は、カーソルデザインのお話です。
サイトを見ていて、細かいところまでデザインが行き届いていると作り手のこだわりを感じます。普段中々変更しないカーソルデザインが変わっているだけで、ちょっとこだわりを感じるのではないでしょうか。
隅々まで意識が行き届いた洗練されたデザインを目指したいと思います。

※カーソル表示はPCのみとなります。ご了承くださいませ。

アイコン 2017年6月19日(月曜日)

画像

こんにちは、今週のブログ担当は若井です。
今回は色のお話です。

PCのモニターなどは色をRGBで表示します。
Rは赤、Gは緑、Bは青のことで、それぞれが256階調を持ち、256色×256色×256色 = 16,777,216色もの色が表現できます。

webでの色の表記方法は16進数や10進数などがあり、例えば赤は、#FF0000、rgb(255,0,0)などと表記します。

左のように、R、G、Bの箇所が決まっており、値の上下で色が変わります。
最小値は0、最大値はFF、255になります。

アイコン 2017年6月12日(月曜日)


CLICK!

こんにちは!今週の担当をします原田です。
ウェブサイト製作にはJqueryという技術を使う時がありますが、その中でアニメーションを作れるものがあります。
今回は、梅雨の季節ということでカエルのイラストを作ってアニメを動かしてみました。
イラストや素材によってアニメにもバリエーションができると思うのでさらにチャレンジしていきたいですね。

アイコン 2017年6月12日(月曜日)

画像
CLICK!

こんにちは、今週は長谷が担当します。
早いもので、5月が去ってもう6月になりました。
季節だけでなく、webデザインも目まぐるしく新しい機能が出てきます。

今日はcssだけで実装できるキャプションアニメーションについてのお話です。
画像にアイコンを持っていくと文字が現れるアニメーションです。 こういったものでwebを作ると、より見やすくデザインできそうです。
新しいものももっと勉強していかなくてはと思いました。

アイコン 2017年5月29日(月曜日)

画像
CLICK!

皆さん、こんにちは。今週のブログ担当は若井です。

先日アドビ主催のセミナーへ行ってきました。
目からウロコの神業を知ることができよかったです。
その中の一つに、フォトショでもアートボードの作成が可能になったことが挙げられます。
画像のように、一つの画面の中でいくつものカンバスが作成できます。
これにより、サイズの異なる内容の同じバナーの作成などがしやすいです。

新機能情報を常に得るようにし、作業の効率化を図るべきだと思いました。

アイコン 2017年5月22日(月曜日)


CLICK!

皆様こんにちは。今週は原田が担当いたします。
ウェブサイトの画像は四角以外にも自由に変形することができます。
画像自体を加工しても良いですが、拡大するとぼやけて輪郭がギザギザになってしまうことも多いのではないでしょうか?

そこで、どんなサイズで見ても輪郭がはっきりしたまま表示させることができるコーディングの技術を使うと見やすい仕上がりになります。
他にも色々な形に変えることができるので、もっとチャレンジしていきたいですね!

アイコン 2017年5月15日(月曜日)

こんにちは、今週は長谷が担当します。

最近は目まぐるしく気候も変わり、夏日の様な日々が増えましたね。 庭の植物も気候に負けじと、青々と生えてきています。
本日は「色」についてのお話です。
日本には伝統的な「青」の色味が沢山ありますね。
青、紺、空色、群青色、瑠璃色…ご紹介しきれないほど、数多あります。
日本古来の色味は繊細で美しいものばかりです。
デザインに積極的に使用していきたいです。

アイコン 2017年5月8日(月曜日)

こんにちは、今週のブログ担当は若井です。

今回はフォトショップでgifアニメを作成しました。
表情の違う6枚のイラストを0.2秒ごとに順番に連続して見せています。
イラストが実際に動いているように見えて楽しいですね。
ちょっとした動きを表現するのにgifアニメを使用するのも良いと思います。

アイコン 2017年5月1日(月曜日)


CLICK!

こんにちは、今週の担当をします原田です。
5月に入りゴールデンウィークを過ごされて方も多いかと思います。
もうすぐ端午の節句ということで、鯉のぼりのアニメーションを作ってみました。鯉たち泳いでいるように見えますかね??
これから初夏の季節を楽しんでいきたいですね。

アイコン 2017年4月24日(月曜日)

加工写真
CLICK!

こんにちは、お久しぶりです長谷です。
今週よりまた、皆様が少しでも楽しんで頂けるような記事を書いていけるように努めてまいります。
よろしくお願いします。
さて今回は、Photoshopの加工についてのお話です。
随分昔からある機能なのですが、中々使いこなせていない「レイヤースタイル」です。
今回は、写真を絵画の様に加工してみました。 あらゆるツールを使いこなして、深みのあるデザイン制作を目指していきたいものです。

アイコン 2017年4月17日(月曜日)

こんにちは。今週は能登が担当します。

4月になり、暖かい日がふえて外に出るのが気持ちいいですね。
今回はリボンのついたフレームを作ってみました。
リボンはフレームの上と下の2つのパーツで出来ています。 枠にリボンのまわり込む部分を作ることで、簡単な動きを出せるかと思います。

アイコン 2017年4月10日(月曜日)


CLICK!

こんにちは、今週のブログ担当の若井です。

今回は画像をcssで菱形と円形に切り抜いた春らしいバナーを作成しました。
画像を大胆に使用したいとき、ただの四角では味気ないですが、形に工夫を加えると華やかさが出ますね。

アイコン 2017年4月3日(月曜日)


CLICK!

こんにちは。本日の担当・原田です。
4月に入りまして新年度のスタートですね。
本年度も皆さまどうぞよろしくお願いいたします。

さて、お花見シーズンということで桜吹雪をウェブページで作ってみました。
ホームページの背景にしたり、桜以外の花びらを使って違うデザインを作ってみるもの良いかも知れませんね!

アイコン 2017年3月28日(火曜日)

こんにちは。今週は能登が担当します。
今回は水彩のテクスチャーで、写真の加工をしてみました。レイヤーマスクを使ってブラシの跡を残し、雰囲気を作りました。 実際に絵を描く時と同じようにブラシの硬さや透明度によって、濃淡を調節していくことが加工のポイントです。

今年も満開の桜を見るのがすごく楽しみですね。

アイコン 2017年3月21日(火曜日)


CLICK!

こんにちは、今週のブログ担当は若井です。

今回はニュースティッカーのページを作成しました。
ティッカーとは、特定の範囲内にテキストを流して表示させる方法のことです。限られた範囲で多くの情報を表示できるので、ホームページではニュース部分などに使用されていることが多いです。

例を作成しましたので、CLICK!から別ウィンドウを開いてみてください。

アイコン 2017年3月13日(月曜日)


CLICK!

皆さまこんにちは。今週の担当の原田です。

ウェブサイトはパソコンやスマホなど色々な環境で見ると思いますが、それぞれの環境によって違うものを表示させるウェブ技術があります。
実際にサンプルページを開いて、画面を段々縮めてみてください。
卵が次々と違う絵に変わっていきます。
環境ごとに異なるデザインを作りたい時にこの技術が応用できますね!

アイコン 2017年3月6日(月曜日)

こんにちは。今週は能登が担当します。
3月になりました。天気が良い晴れの日には、春を感じることが増えてきました。
今回はブラシツールをアレンジして、色鉛筆のような素材感をつくってみました。
まさに手書き感をそのままに生かすことができます。

学生時代は新しいノートを買うことでも春を感じていたことを思い出しました。

アイコン 2017年2月27日(月曜日)

皆さん、こんにちは。今週のブログ担当の若井です。

左は動画のように見えますが、gifアニメです。
gifアニメはパラパラ漫画のように静止画を連続して見せているものです。
軽い動画であればフォトショップでgifアニメに変換することができます。

スマホでは動画を自動再生できなかったり、パケット容量がかかる等で動画をデザインに組み込むのは少し難しいのですが、このようにgifアニメを使用する方法もあります。

アイコン 2017年2月20日(月曜日)


CLICK!

こんにちは。
今週は原田が担当します。
ウェブサイトには様々なアニメーションを付けることができます。
「ここをクリックしてください!」という風にリンクボタンを目立たせたい時もアニメーションは有効です。
今回は、雪の結晶の画像にアニメーションを付けて光っているようなボタンを作ってみました。
他にも色々なアニメーションを盛り込んで充実したサイトを製作していきたいです。

アイコン 2017年2月6日(月曜日)

こんにちは。今週は能登が担当します。

今回は丸のボタンをつくってデザインを考えてみました。
色のグラデーションや光の効果よって、表面に透明感のあるボタンにすることができました。
光と丸の組み合わせはビー玉やゴムボールなど、子供の頃好きだったおもちゃを思い出すモチーフでもあって、遊び心を加えたデザインをまた考えてみたいです。

アイコン 2017年1月30日(月曜日)


CLICK!

皆さん、こんにちは。今週のブログ担当は若井です。

今回はスクロールしていくとコンテンツがフェードインして表示されるページを作成しました。
CLICK!から別ウィンドウを開いて、スクロールしてみてください。

表示にフェードインを加えると少し上品さを演出できるように思います。
フェードインの仕方にも種類があるので、サイトによってフェードインを変えてみるのも良いですね。

アイコン 2017年1月23日(月曜日)

こんにちは。今回担当します原田です。
先日、上野の森美術館で「デトロイト美術館展」を見まして、作品撮影OKとのことだったので気に入った作品を写真に収めてきました。
この絵の作者はアンリ・マティスという人で、色使いや抽象的に見える作風が良いなと思います。計算されているような構図にもかかわらず、とても自由に描いている印象を受けますね。
今年も多くのアート、デザイン作品を見て良い刺激を受けていきたいと思います。

アイコン 2017年1月16日(月曜日)

こんにちは。今週は能登が担当します。
今回はネオン管の様なテキストのデザインを制作してみました。
ぼかしや影の大きさ調整したレイヤーをいくつか重ねて、 立体感を表現しています。

2017年も新しいデザインに沢山挑戦していけたらと思います。
今年もよろしくお願いします。

アイコン 2017年1月10日(火曜日)


CLICK!

皆さん、新年あけましておめでとうございます。今年もよろしくお願いいたします。

今週のブログ担当は若井です。
年末年始はゆっくり過ごされましたか?私は帰省して来ました。
私の地元は雪が降る地域なのですが、ホームページにもjqueryプラグインで雪を降らせることができます。
CLICK!から別ウィンドウを開いて見てみてください。
『Snowfall』 というプラグインなのですが、雪の色やサイズ等も変更できるので、演出に良いと思います。

アイコン 2017年1月4日(水曜日)

みなさま新年あけましておめでとうございます
2017年もどうぞよろしくお願いします

年明け1回目のブログは原田がお届けします。
今年の干支・酉は、「運気をとりこむ」「お客さまをとりこむ」などを想起させ商売繁盛など縁起がいいと言われているそうです。
今年もより充実した一年となるように邁進していきたいですね。