「HTMLやCSSはわかるようになったけど、jQueryはよくわからないし苦手…」といった初心者の方向けにjQueryの基本的な使い方をまとめました。 基本的なjQueryの使い方を覚えるだけでもできることは色々あるので、これからjQueryを勉強する人の参考になれば幸いです。それではどうぞー！ スポンサーリンク jQueryとは？ jQueryってなに？ jQuery（ジェイクエリー）というのは、JavaScript（ジャバスクリプト）のライブラリです。何ですかそれって感じですよね…。 JavaScriptを簡単に説明すると、主にブラウザ上で使われる言語（※1)でWebサイトにアニメーション効果をつけたり、フォームのエラーチェックをしたりなど様々な場面で使われています。 JavaScriptがあるおかげで、Webサイト上の色々な要素を動かしたり操作することができるんです。それ以外にもアプリケーションの開発などにも使われています。まさにJavaScriptさまさまで、人気の高いプログラミング言語です。 ライブラリというのは英語で「図書館・書庫」といった意味がありますが、ここで出てきたライブラリというのは「よく使う機能をパーツ化してまとめたもの」という意味です。 JavaScriptのライブラリ、と呼ばれているだけあってまさに「図書館」のようにJavaScriptの利用度の高いものをギュッとまとめたものなんですね。 ここまで読むとjQueryがどんなものが少し分かると思いますが、つまりJavaScriptが世の中に出てこなかったら、jQueryも存在していません。ニワトリがJavaScriptで、卵がjQueryのようなもの。jQuery生みの親がJavaScriptという関係です。 ※1: サーバー側で使われるJavaScriptもありますが、ここでは必要ないので省略します jQueryを使うメリット jQueryを使うメリット jQueryがJavaScriptのライブラリというのはわかったけど、元のJavaScriptを使えばいいんじゃないの？と思う人もいるかもしれません。 ですが、jQueryを使う大きなメリットがあるんです。それは「短いコードで実装できる」ということです。便利でカンタン！ 記述が長いと管理も大変だし、データも大きくなるので大変ですよね。jQueryではその点を解消していると言えます。 jQueryには専用の「命令文」が用意されているので「こう記述したら、こう動く！」といったものがJavaScriptよりも短いコードで実装できます。JavaScriptの短縮簡易版ですね。 また基本的にどのブラウザでも問題なく動作するのも使いやすいメリットのひとつだと思います。 […]
ブログ
イラストレーターでアイコンを作る時によく使う機能いろいろ。
イラストレーターの練習にもってこいなのは、アイコンを作ることです。まず基本になるパスの練習ができます。あと短時間で作ることができるので、慣れない人でも飽きにくいというのも良いところです。色んな機能を覚えれば、それだけ作れるアイコンの種類も広がります。今回はアイコンを作る時によく使う、しかも簡単な機能を紹介しながら、色んなアイコンを作ってみたいと思います。アイコン作りってやってみると楽しいですよ！ 1.回転・リフレクトさせるだけで色々つくれます。 アイコン作りでまずやってほしいのが回転でとにかく色々作ることです。一部を作って回転させるだけで色々なアイコンが作れるので、練習するにはまずこれだと思います。 回転１ 細かい作り方は過去記事を参考にしてみてください。 春らしい桜や梅の花をイラストレーターで簡単に作る方法。 角度をきっちり決めて作る時はガイドを先に作っておくと便利ですよ。 回転２ あとはこんな感じで幾何学模様っぽいのも作れたりするので、日頃から使い慣れていると「このパーツだけ作ったら回転するだけで済むなー」とか思いついたりするので慣れておくのが一番ですねー。 回転３ 左右対称の場合は、半分だけ作ってリフレクトで左右反転させると早く作ることができます。場合によっては全部を円などの組み合わせで作ったほうが良い場合もありますけど、パスを使って作る練習にもなるのでぜひやってみてください！ 回転４ 2.整列・分布で思い通りの配置に 整列・分布機能を使いこなすと、配置をばしっと決められるのでぜひ覚えておくことをおすすめします。基本的な機能が一番使うので、何でも後は応用だと思います。 整列・分布１ 整列方法は「選択範囲に整列」「キーオブジェクトに整列」「アートボードに整列」の３つがありますが、実際によく使うのは「選択範囲に整列」と「アートボードに整列」の２つだと思います。「キーオブジェクトに整列」はメニューから選ばなくてもできるので、後で説明しますね。ちなみにその設定は上の画像のパネル内の右下に「整列：」と書かれたところがあると思うので、そこを押すとメニューが出てきます（基本は選択範囲に整列になっています） 整列の基準について ちなみに「整列」は上（左）・中央・下（右）でオブジェクトを揃えるだけなので簡単ですけど、分布って聞いただけだと「？」という人もいると思うのでさらっと説明しておきますね。例として、大きさの違う４つの丸を用意して、実際にオブジェクトの分布を使ってみたいと思います。 整列２ もし「アートボードに整列」を選んだ場合は、アートボードの大きさを基準にオブジェクトが分布されます。水平方向に分布した場合は、垂直の縦とは逆に横の間隔が一定になると覚えておけば良いです。 […]
高級感を感じる配色やデザインについて、色々なサイトを参考にして考えてみました。
このブログは配色やデザインについて個人的に気付いたことを書くことが多いですが、そういえば高級感に関するまとめってしてないかも？と思って今回はこのテーマで記事を書いてみようと思います。高級感を打ち出したサイトは、業種に限らず使われることが多い演出のひとつです。ど初心者の頃は、何を作っても安っぽく見えてしまう…といった悩みもありました。どうすれば高級感を出すことができるのか、複数のサイトを通して感じたことをまとめてみました。 高級感にも色々ある 高級感を出す、といっても何の業種か、誰に対してか、ということによっても表現の仕方に違いが出てきます。女性向け・男性向け、値段の高さを表現したいのか、あまり高いものではないが上品さを表現したいか、などなど状況に応じて違った表現をする必要が出てきます。今回は様々な業種で、参考になるものを見てみたいと思います。 美容 hacci はちみつコスメティクス HACCI 印象に残った配色 白の背景をベースに、ロゴにも使われているベージュ色を使った配色で清潔感と高級感を出しています。余白に余裕があって、なおかつイメージ写真＋最低限必要なテキストで優雅な雰囲気を崩さないようにしています。 クレ・ド・ポー ボーテ クレ・ド・ポー ボーテ 印象に残った配色 こちらは高級化粧品ブランドのサイトです。黒をメインに使った配色なので、大人のイメージを強く打ち出しています。大人の雰囲気を出すために、他に使っている色も商品と同じ明度の低いパープルを使ったりと、統一性も考えた配色がされています。こちらも上で紹介したサイトと同じく、必要最低限の情報のみに抑えることで上質な雰囲気が出ているように思えました。 ファッションブランド ティファニー Tiffany 印象に残った配色 ターコイズブルーの色で有名なティファニーのサイトです。企業カラーをメインに使ったシンプルなレイアウトです。赤いリボンを写真内に使うことで、クリスマスの季節感を出し、さらに色の対比がうまれ見た目のアクセントになっています。 バーバリー burberry […]
複数の色を使うときにバランスよく配色する方法
ちょっとひさびさに配色についてです。カラフルに仕上げたいけど、なぜかうまくいかない！バランスが悪くなる！という場合のちょっとした配色のコツを書いてみたいと思います。 １．彩度・明度をそろえる 複数の色を使う時は、それだけで全体的にバラバラになりやすいのでひとまず彩度や明度を同じにするだけでもまとまりが出ます。 彩度・明度をそろえる ２．暖色・寒色でそろえる テーマカラーなどがある場合は、暖色・寒色でそろえるとバランスよくなりやすいです。暖色・寒色どちらか一方でも沢山の色があるので工夫次第で表現の幅が広がります。 暖色・寒色でそろえる ３．似た色を隣に置かない 色んな色を使いたい場合、一番ここに気を使えばそれだけでバランスがアップします！例えば、緑の横に緑や黄緑を置かない…など。似た色を隣同士で並べてしまうと全体的に偏った印象になるので出来る限り全体にまんべんなく使うほうがバランスよく仕上がります。 似た色を隣に置かない ４．パステルカラーを使う 明度が高い色や原色などは、複数の色を使えば使うほど印象が強くなりすぎて全体のイメージがバラバラになってしまいます。パステルカラーなど彩度の低めの色を使うことで、印象が柔らかくなり統一感が出ます。 パステルカラーを使う ５．重たく見える色・軽く見える色のバランスを考える 自分で選んだ色を使いたいんじゃい！パステルなんてやってられるかっ！という方は、選んだ色を重たく見える色・軽く見える色にわけて、その色のグループがかたまらないように配置するとバランスが良くなります。重たく見えるか軽く見えるかは、明度の度合いで変わります。 明度の差で分類する また彩度や明度はカラーピッカー上でＳやＢと表記されているので、日頃から色の彩度や明度を気にかけると配色もうまくなると思います！ 彩度や明度にも気を配る 他にも、イラストレーターのカラーガイド機能やフォトショップのKulerパネルを使うのも、参考になると思います。 配色が苦手な人は、イラストレーターの「カラーガイド」がおすすめ。 […]
色とは？色の意味・イメージ・心理効果まとめ。
色の意味や心理的なイメージを知っておくと、その意味をふまえてどんな風に見せたいかを表現できるようになれます。 普段何気なく見ている色には、本当にたくさんの効果があります。記事にまとめることで、改めて色の持つ意味ってすごいな〜としみじみ思いました。ぜひ今回の記事で色についての知識を深めていただければ幸いです。 また記事の後半ではデザイナーの方向けに色に関する基礎知識と、配色をする時に役立ちそうなコツについても書きました。デザインを勉強している方の参考になれば嬉しいです。それではどうぞ！ スポンサーリンク 色とは？色はなぜ見えるの？ まずは色ってなんだろう？というところから。 透明も含めて、どんな物にもそれぞれの「色」があります。でも実際に目で見ているのはその物に反射した「光の色」なんです。たしかに暗い場所では反射する光がないので、物の色が分からないですよね。 下の例のようにリンゴが赤く見えるのは、光がりんごに当たった時に赤い色の光だけが反射されて目に届くからです。この時他の色の光は反射されず、吸収されるので目には届きません。 色はなぜ見えるの？ 物の色はこのリンゴのように、表面を反射する光「表面色」と、物を光が透過して見える色「透過色」によって色が決まります。またこの２つの色は「物体色」と呼ばれています。 色は人の心理にイメージ（印象）を与える効果がある 色には人の心理に働きかける効果があると言われています。 色は人の心理にイメージ（印象）を与える効果がある 細かいことは知らなくても「この色は派手だな」とか「殺風景な感じがする」など、色を見て何かしら印象を持ちますよね。人によってそれぞれ好きな色や嫌いな色があるのも、色が人の心理に何らかのイメージを与えているからです。 専門用語では、色が持つ印象効果のことを「色彩感情」といい、その色が何かと結び付いて連想（イメージ）されることを「色彩象徴」といいます。 １２色の意味や心理的なイメージについて ここではよく使われている代表的な１２色を例に、それぞれの色がもつ意味や心理に与えるイメージについて説明していきます。 赤色の意味・イメージ 赤色の意味・イメージ・心理 ＜イメージ（象徴）＞ […]