ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2017年7月14日

絶妙な色の組み合わせと良質なデザインの関係性

relationship-between-exquisite-color-combinations-and-good-design
「この色の絶妙な組み合わせはなんだろう」
「このサイトはどんな色が合っているだろう」
デザイナーならば一度は配色に頭を悩ませるはずです。

色は見た人に、その意味を伝えれます。だから、色の選択を間違えると意味を正しく伝えることができません。
色は、デザインをする上で必要不可欠な要素であり、プロジェクトの成功にも大きく関係していくため、デザイナーは非常に気を使う要素です。

この世界には、何万色もの色があります。デザイナーはその中から最適なパターンの組み合わせを選ばないといけません。
しかし、意味のないデザインはないため、そのルールに従って配色することによりデザイナーはしっかり配色できます。
知っといたほうがいい配色のルールや知識を解説していきたいと思います。

色相環と虹

色の関係を表すのに「色相環」というものがあります。
赤、橙、黄、緑、青、藍、紫といった様々な色を、順番に並べた円形の図で、それぞれ色の反対側(例えば、赤の反対は青緑など)に補色がくるように作られています。

この色相環と同じ順番で並んでいるのが虹です。虹はどの国も共通で色が並んでいます。人間によって作られた色相環も、自然のものを参考に作られています。

自然と配色の関係

配色は元から自然界にあるものを使うことにより、見た人は自然と受け入れやすくなります。例えば、「木の緑」、「空の青」、「白い雲」という組み合わせは、たくさんの人がほとんど毎日見る配色です。
人は自分が経験、体験したものは自然と受け入れやすくなり、逆にあまり馴染みのないものは違和感を感じてしまいます。デザインはこの違和感をなくしたり、あえて出したりして、バランスを整えます。
また、真っ黒というものは自然界には存在しないそうです。
なので、配色で黒を使うとき、純粋な黒ではなく、なにかしらうっすらと色を混ぜたほうがなじんだりします。

ナチュラルハーモニーとコンプレックスハーモニー

色相環を見ると明度や彩度が同じでも黄色周辺の色と、反対側の紺色周辺の色では、それぞれ感じる明るさが違います。

暖色系の黄色は明るく見え、逆には寒色系である紺色に近い色は暗く見えるからです。
色により感じる明るさの違いは、自然界では自然のことです。例えば、日光が当たった葉っぱは明るい黄緑に感じますし、日光が当たらず日陰になった部分は暗く感じる青緑に見えます。

これを利用し、配色のうち明るい方に黄色に近い色を置き、暗い方に紺色に近い色を置くことをナチュラルハーモニーと呼び、その逆、明るい方に紺色に近い色を、暗い方に黄色に近い色を置くをコンプレックスハーモニーと呼びます。

色の役割分担

最も大きな面積を占める基本となるベースカラー、サイトの印象を決定づける主役のメインカラー、全体の5%と少ないけど全体を引き締めるアクセントカラー。
ベースカラーを70パーセント、メインカラーを25パーセント、アクセントカラーを5パーセンの割合にするとバランスよく見えます。

ベースカラー

この色は主にサイトの背景色なります。
白、黒、グレーの無彩色は他のメインカラー・アクセントカラーの妨げになりにくいので、サイトとかでもよく使われていると思います。

メインカラー(キーカラーともいう)

この色は最初に決めましょう。なぜかというとサイトのイメージを大きく左右するからです。メインカラーは文字が読みやすいなどの理由から明るさを落とした方が使用しやすいです。

アクセントカラー

全体の色調を引き締めたり、ベースカラーやメインカラーを引き立てる役割を持つ色のことです。
アクセントとなる色はお問い合わせのボタンの色などのクリックをして欲しいところや、注目させたいところに使用すると効果は大きいです!

色の意味

色相環の中の3色と、無彩色の白と黒の意味を紹介します。

連想するワード 情熱、活発、積極的、注意

興奮作用がある赤は、情熱、活発の色というイメージがあります。
赤はとても目立つので、より目立たい部分に使われることが多く、警告や警戒といった注意を促す部分にも使われたりします。

連想するワード 清潔、冷静、誠実、落ち着き

海や空のイメージがあり、見た人に安心感を与えます。寒色系の色なので、食欲の低下などのイメージを与えるためファミレスなどの色には向かないです。
また、信頼や誠実などのイメージから企業や病院などのサイトで使用されています。

ピンク

連想するワード 可憐、愛情、女性的、優しい

女性らしさを印象づけ、そこから優しさ、可憐さ、愛情といったイメージがあります。女性向けのデザインだと効果抜群ですが、他色との組み合わせysトーンで、対象となる年齢が変わります。ターゲットによって、色を考えましょう。

連想するキーワード:純白、清潔、平和、洗練

清潔であり清楚なイメージで、平和や正義を象徴する色でもあります。他の色を引き立てる効果を持つ白は、ベースカラーとして使用されることがとても多い色です。同じ無彩色の黒とは裏腹に、ポジティブな印象ですが、無機質などのネガティブなイメージも持ちます。

連想するキーワード:洗練、高貴、優雅、不安

いろいろな色を混ぜ合わせれる色で、重たいものをもっと重たく、硬いものをもっと硬く感じさせる効果があります。明るめな色と組み合わせることのより、その色をより明るく見せ、強く主張できます。黒は、暗さや影、葬式というイメージからネガティブな印象があります。

このように配色にはルールがあります。
では次に無料のカラーツールを紹介していこうと思います。

これはAdobeが提供している新しいカラーパレットを生成できるツールの一つです。これは有名なので知っている方もいるのではないでしょうか。このツールの便利なところはphotoshopやIllustratorとの連携できる機能があるところです。
Adobe Kuler

これは、ページの上にある検索欄にカラーコードを入れるとその色に関係するいろいろな情報を出してくれます。
Color Hexa

日本の「和」がほしい!という方はオススメです。画面上で好きな色をクリックすると背景色がクリックした色に変化します。
日本の伝統色

まとめ

いかがでしたでしょうか?
色というのは、デザインを見た人に対し、印象に強く残ります。どのような印象を与えたいのか考えて色を選択し、どのような感じで配色するかを考えるのは、難しいけど楽しさもあります。

これを考える力を身に付けるには、本の表紙や、Webサイト、雑誌などをたくさん見て、どのような配色で作られてるかを見たり、色の理論を勉強するなど、いろんな方法がありますが、やはり大事なのは、自分で考えて手を動かすことではないかなと思います。
やってみて成功しなかったら調べてみる。そうすることにより、ただ見てるのとは違い自分自身に得られるものが大きくなります。

デザイン以外にも言えることですけど、自分に足りないものがある。けどそれが何なのかわからないというときは、完成しているものと比較するのが良いです。

みなさんも色の基本を身に付けて楽しくデザインをしていきましょう。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年7月5日

レスポンシブウェブデザインにおけるviewportを理解しよう!

understanding-viewport-for-responsive-webdesign

弊社の記事でもなんども紹介しておりますが、サイト制作においてスマホ最適化が必須となっている今、viewportの指定はWebデザイナーなら一度はつまづいたことがあるのではないでしょうか?結局、どうするのが1番いいのか、そもそもviewportって一体なんなのか、今回はviewportについて掘り下げて紹介したいと思います。

まずは、レスポンシブWebデザインとは?を理解しよう

以前弊社の記事でも紹介させていただいた、「今更聞けない?レスポンシブwebデザイン」の記事もぜひご参照ください。

レスポンシブウェブデザインとは、デバイスの種類ごとに別サイトを用意せず、ひとつのHTMLファイルで、パソコンやスマートフォン、タブレットに最適化されたページを実装することを指します。どうやってデバイスを判別するかというと、画面の大きさで判別をしていきます。グーグルにも推奨されている手法であり、URLも切り替わらなかったりとメリットも大きいので、弊社ではレスポンシブウェブデザインでのスマホ最適化がほとんどです。

他にも、同一URLでもパソコンとスマホで別HTMLを呼び出す手法の「ダイナミックサービング」というものもありますが、こちらはよほどスマホサイトなどに力を入れたい場合でないと、運営の手間がかかるためおすすめできません。ただ、デザインの幅は広がるので、ユーザー目線で考えるならばこちらの方が利便性の良いサイトを作ることが可能です。

viewportって何?

Webデザイナーでない方は「viewport」という言葉を聞いても、なんのことだかさっぱりわからないかと思います。「viewport」とは、「表示領域」のことを指しており、ブラウザにおけるウィンドウの画面幅(ウィンドウ幅)表示領域がviewportとなります。

スマホやタブレットの普及がなく、デスクトップPCだけの環境では意識する必要がなかった「viewport」の概念ですが、デスクトップPC幅とは画面サイズが異なる、スマホやタブレットの普及により、それぞれのデバイスで横幅がはみ出たりすることがないよう、指定する必要が出てきました。

横幅いっぱいでおさまらないコンテンツや本文は、横のスクロールがついて表示されてしまいます。そこで、パソコンの表示と全く同じにしておきたい場合や、レスポンシブウェブデザインの場合などviewportを指定することで、画面幅いっぱいにコンテンツや本文がおさまるようにしていくのです。

魔法の呪文<meta name=”viewport” content=”width=device-width,initial-scale=1″>

viewportの指定といっても、このようなコードをコピペして使用している方が多いのではないでしょうか?

大体の場合はこれで問題もなく、制作していけるので、このコードについて深く考えることもあまりないかと思います。ただ構造を理解することによって、何か問題が生じたときなど、柔軟に対応することができるようになるので、今回はこちらのコードについて詳しくご紹介したいと思います。

viewportで指定可能なもの

width(横幅)

viewportの横幅を指定できます。ピクセル単位での指定が可能です。初期値は980px、指定できる範囲としては、200px〜10000pxとなるようです。他にも、表示しているデバイス幅に合わせる、device-widthがあり、魔法の呪文で使われるものはこのdevice-widthが指定されています。

▼横幅を750pxにする場合

上記のように指定することで、横幅750pxの下層領域としてviewportが作られることになります。
こちらの幅とメディアクエリのブレイクポイントの幅を合わせておけば、問題なく最適化することも可能です。ただ、widthのピクセル値が効かない端末も一部あり(古いAndroidなど)、あまり推奨されている表記ではありません。

height(縦幅)

あまり使うことはありませんが、縦幅の指定をすることも可能です。横幅とのアスペクト比から計算される値が初期値となっているようです。widthと同じように、200px〜10000pxの間で指定でき、device-heightも指定可能です。

initial-scale(初期倍率)

そのページが表示されたときの倍率の設定です。width=device-widthを指定していて、initial-scaleを指定しない場合は、initial-scale=1と自動的になります。

minimum-scale(最小倍率)

最小縮小倍率の指定です。初期値は0.25で、0より大きく10未満の値を指定できます。

maximum-scale(最大倍率)

minimum-scaleと同様最大拡大倍率を指定できます。0より大きく10未満の値を指定することができ、初期値は1.6になっております。

user-scalable (ズーム操作の可否)

ユーザーがズームすることを許可するかどうかを指定できます。yesかnoまたは1か0で指定することができ、初期値はuser-scalable=yesになっています。

target-densitydpi (ターゲットとなる画面密度)

target-densitydpiは古いAndroid端末のために指定するものになります。ターゲットとなる画面密度の設定となりますが、target-densitydpi=device-dpi(ターゲットとなる画面密度をデバイスの画面密度と合わせる)とすることで端末ごとに表示される文字サイズも大きく変わってしまうことから、最近ではそうならないよう、target-densitydpi=medium-dpiに設定するか、そもそも記述しないことが多くなっているようです。
古いAndroid端末に向けてであり、最近のもの(Android4.2以降)では廃止されているので、気にする必要はないかもしれません。

メディアクエリについて

先ほど、viewportで指定する表示領域の幅と、メディアクエリのブレイクポイントの幅を合わせておけば、問題なくスマホ最適化することも可能だとご紹介しましたが、メディアクエリについても少し説明したいと思います。
メディアクエリ(Media Queries)とは、デバイスの解像度やウィンドウの幅(画面サイズ)、向きなどの指定条件に合わせて、パソコンとスマホで別々のcss(スタイルシート)を適用できる機能のことをいいます。メディアクエリを使用したcss(スタイルシート)の切り替えは、切り替え条件として「ブレイクポイント」(Break Point)を設定します。
このブレイクポイントは簡単に言うと、表示している画面幅が750px以下ならこのスタイルを、750pxより大きいならこのスタイルを、といったような形で切り替えが行われます。このメディアクエリによりレスポンシブウェブデザインを行うことが可能になりました。
しかしながら先ほども述べたように、一部viewportのidthのピクセル値が効かない端末もあることから、viewportで指定する幅とメディアクエリのブレイクポイントの値を合わせてスマホ最適化する方法は推奨されておりません。

まとめ:結局どうやって指定するのが1番いいのか?

ここまででviewportについてと、レスポンシブ化する仕組み、メディアクエリのことなども簡単にご理解いただけたかと思います。結局のところ、viewportの指定はどのようにするのが1番いいのか?
結局のところ、魔法の呪文である

に落ち着きます。メディアクエリさえ正しくなっていれば、この表記で問題が起こることはそうそうありません。
たまに起こってしまうスマホ表示の際の右側の謎の空白など、幅は全て収まっているし、心当たりも何もなく、どうしても解決できなさそうな場合はwidthにそのサイト幅を指定してあげると解決できることもあります。
たった一行の記述ではありますが、レスポンシブウェブデザインにおいて重要な記述のviewport、少し理解が深まったでしょうか?Webサイト制作の際、何気なく使用しているコードは他にもたくさんあるかと思います。そういったものもどういった記述なのか、どういった役割があるのか、など知識を深めていくと、またよりいっそう制作が楽しくなるので、どんどんいろいろなことを調べていきましょう!

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月30日

CSSの書き方(基礎)

css-coding-basic

CSSとは

 CSSはホームページにおいて見栄えや飾り付け、レイアウトの要素を補う言語です。他ではCascading Style Sheets(カスケーディングスタイルシート)やスタイルシート(stylesheet)と呼ばれてもいます。CSSを使うことで、見やすく、HTMLでは表現できない装飾なども簡単につけることができます。

 それ以外にCSSを使うことで、ソースコードが短くなり、ページの読み込み速度も早くなります。現在のほとんどのホームページではCSSが使用されています。

 

CSSの構造

 CSSでは主に3つの要素でページの見栄えやレイアウトの指定をしています。

・セレクタ(selector)
 どこの部分に見栄えやレイアウトを指定するか

・プロパティ(property)
(セレクタ)の部分をどうするか

・値
(プロパティ)をどの程度施すのか

簡単にいうと、「どこに(セレクタ)」「何を(プロパティ)」「どうするか(値)」です。
例えば、「h2タイトル(セレクタ)」の「位置(プロパティ)」を「中心にする(値)」というふうに書いていきます。

上記の部分をCSSで書くとこうなります

h2{text-align: center; }

“h2”がセレクタで、”text-align”がプロパティ、”center”が値になります。

複数プロパティを指定する場合はそのまま“;”のあとにプロパティから書き足していきます。

(例)フォントのサイズの指定もする場合
h2{text-align: center; font-size:40px;}

複数のプロパティを指定する場合、CSSは空白を無視するので下記のように改行いていくと見やすいです。

 h2{

text-align: center;
font-size:40px;
}

CSSは編集したい部分に細かく(位置・色・大きさなど)プロパティと値を設定していくことで見た目やレイアウトを整えていくというように考えていくとわかりやすいです。

 

セレクタ

 セレクタにはいくつか種類があります。セレクタの種類を使い分け次第では、コーディングの際、修正のしやすさなどが変わっていきます。

 ・全称セレクタ
全ての要素に適応されます。

 (例)全ての要素の色を黒にする
* {color:black;}

・要素型セレクタ(タイプセレクタ・要素タイプ)
特定の要素名(HTMLのタグなど)にスタイルを指定するセレクタで、HTMLで書かれたの要素にスタイルが指定されていきます。

例えばh2タイトルに下記のようなCSSがかけられると、全てのh2タイトルにスタイルがあてられます。 

CSS

h2{text-align: center; }

 

HTML

<h2>タイトル文字</h2>
<h2>タイトル文字</h2>
<h2>タイトル文字</h2>

 

・classセレクタ
特定のclass名(クラス名)が付けられた要素に対して、スタイルを適用していきます。class名を記述する場合は頭に.(コンマ)を必ず入れます。下記のような記述の場合、一番上のh2タイトルのみ適用されます。同じ要素で、デザインが違う場合はこのようにclass名を付けて使い分けて記述していきます。

 

CSS

.ttl{text-align: center; }

 

HTML
<h2 class=“ttl”>タイトル文字</h2>
<h2>タイトル文字</h2>
<h2>タイトル文字</h2>

 

 

・idセレクタ
特定のid名がつけられた要素に対してスタイルを指定するセレクタです。文書の内で、同じid名を重複して使用することはできません。idセレクタを記述することで、特定の文書の部分に対していっきにスタイルを適用することができます。

他にもセレクタの種類はいろいろありますが、まずは、要素セレクタとclassセレクタ、idセレクタの違いをきちんと理解することが大切です。

 

プロパティ

プロパティは色・形だけでなく目的に合わせてたくさんの種類があります。よく使われるプロパティは覚えておくと、作業効率がよくなります。よく使うため、覚えておくといいプロパティを紹介していきます。

 color:(カラーコードやカラー名);  文字の色を指定する

background-color:(カラーコードやカラー名); 背景の色を指定する

font-family:(フォント名やゴシック・明朝などの指定); フォントの種類または

特定のフォントを指定する

font-weight:(boldなどフォントの太さ); フォントの太さを指定する

line-height:(ピクセル数など); 行の高さ(行間)を指定する

width:(ピクセル数など); 横幅を指定する

height:(ピクセル数など); 高さを指定する

margin:(ピクセル数など); マージンの指定をする

padding:(ピクセル数など); パディングの指定をする

float:(leftもしくはrightなど); 左か右に寄せて配置する

上記のプロパティは、いろんな要素に対してよく使用されます。また、マージンやパディングについては値の書き方で指定される方向が変わるので間違えないようにしましょう

 1つの場合→「上下左右」
2つの場合→「上下」「左右」
3つの場合→「上」「左右」「下」
4つの場合→「上」「右」「下」「左」

複数の値を記述する場合は、半角スペースで区切っていきます。

 

スタイルの優先

 CSS文書で同階層内に同じセレクタ名もしくはクラス名が重複している場合、後から読み込まれたスタイルに上書きされるため、後から書いたプロパティの値が優先されます。値を修正しても変わらなかったり、問題が起こることもあるので、注意しましょう。

 

スタイルの設定

 HTMLファイルの文書とCSSファイルの文書は別のにファイルになっているため、HTMLでスタイルを設定する必要があります。スタイルの設定方法はいろいろありますが、ここではよく使われている1つ紹介します。

<link>要素として外部CSSファイルを読み込んで指定する

 HTMLファイル内からCSSファイルを呼び出します。 HTML文書内の<head>要素の中に<link>要素を記述して、外部CSSファイルの指定をします。 適用されるlinkのスタイルがCSSであることを教えるために、<link>要素にtype属性を付けて値にtext/cssと記述し指定します。 XHTMLとの互換のしやすさや修正のしやすさなどからこの方法を使う場合が多いです。

 HTML(CSSファイルをindex.cssとして記述してる場合)

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>
<body>

</body>
</html>

 

最後に

 CSSの勉強し始めは、何を記述しているのかさっぱりと思うかもしれません。一見複雑なことが書かれている文書に見えますが、細かくバラして見てみると一つひとつは単純なスタイルの指定で、それを重ねていくことで現在のようなホームページができています。Webページのデザインを考えるときも、CSSで記述することを考えて作っていくと、コーディングのしやすさなどの作業効率も変わっていきます。

 

 

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月26日

間違えやすいHTMLタグを比較!

compare-html-tags-that-are-easy-to-mistake

Web制作に欠かせないHTMLタグですが、しっかり意味を理解して使っているでしょうか?私もなんとなくこれは、ここに入れれば…ということはわかり始めましたが、実際なぜここにこのタグを使うのかしっかり考えたことはありませんでした。ちょっとした違いですが、間違えやすい、勘違いしやすいタグ、今回は、HTMLタグについて書いていきたいと思います。

 HTMLとは

HTMLとはハイパーテキスト・マークアップ・ランゲージと呼ばれる、マークアップ言語の一つです。.htmlという拡張子がHTMLファイルとなります。インターネット上で公開されている、ウェブサイトはほとんどHTMLで作成されています。そして今は、HTML5という仕様になっています。HTML4でのHTML文書が改良され、ウェブアプリケーションを開発するための要素など新たな機能が追加されています。また、文章構造をより明確に示すことができます。また、framesetやframeタグを使っているフレームを利用したタグが廃止されていることも特徴です。そのため、疑似フレームなどをつかうことが必要となりました。

そしてタグとは、文字を<>で囲むことによって指示を与えるものです。ここの文字は大きくしたり、画像を入れたり、リンクを追加したり、さらにリストを作ったり…と様々なことを指示することができます。細かい装飾となるとCSSで指定し、タグで囲まれているところに反映します。試しに右クリック→ページソースを表示をやってみると分かりますが、沢山の<>で囲まれているソースコードが表示されているのが分かります。これがHTMLタグです。

タグの記入方ですが、開始は<>で囲み、終わりは</>で囲むことによってその間にある要素が実際にWebに反映されます。終わりに/をつけ忘れると、Webページが崩れてしまうので、つけ忘れがないように気をつけなければなりません。

 属性について

例えば

<font color=”blue”>属性</font>

このタグだと、colorと書かれている部分が属性(アトリビュート)となります。タグをより細かく効果の指示を出したり、具体的に指示を出したりすることができます。そして属性は多くの場合、属性値を指定する必要があります。属性値とは、上記の場合だと、””で囲まれているblueの部分です。分かりやすく見ると

<font>→開始タグ
</font>→終了タグ
color→属性
blue→値

となります。fontタグにcolorという属性を与え、それにblueという値を指示しています。また、半角スペースを入れることにより、複数の属性を与えることもできます。

間違えやすいタグの比較

次は間違えやすいタグの比較をしてみます。

 divとsectionとarticleの違いとは?

HTML5より、sectionやarticleといったHTML要素が導入されました。HTML4以前はなんでもdivでくくっていました。しかしHTML5から、sectionやarticleが登場したことにより、より明確に文章構造をコンピュータに伝えることが可能となりました。divといったい何が違うのか?その違いについてです。

 div

このタグはブロック要素といい、このタグだけでは特に意味をもちません。しかし、<div></div>で囲った部分を一つのかたまりとして扱うことができます。例えば、ここはヘッダー、ここはフッターなどと、見えない線で区切りを入れているイメージです。使い場所としては、headerやfooterなどが使えない部分となります。ここには、この要素があるよと、コンピュータに伝えるために、これらの要素があります。divは要素が囲めないときのためにあるということが分かりますね。

しかし、最初にも話したように、divには特に意味を持たないので、入れることができるときは出来るだけ、headerなどに優先的に入れることが必要となります。divはその後になります。

 section

sectionとは文章の章や節などのように、見出しとそれに関する内容というように範囲を指定する場合に使います。divより目的がしっかりとしており、主に見出しなどに使われています。そのため、sectionを使う場合には、中に要素の中にはh1~h6要素を使って見出しをいれなければなりません。

タグを使うか迷った際には、中にh1~h6を入れるかどうかで判断すると良いと思います。また、必ずしもsectionを使った方がいいとは限りません。レイアウトが目的の場合はdivを使用した方がいいという場合もあります。

article

sectionと似ているタグですが、根本的な部分が違います。これは『自己完結した内容』に対したものに用いるタグです。例えば、ブログやニュースの記事などを想像してみてください。1つ、1つ並んでいますが、全く別の内容となっています。sectionは本のように1つのものに対して見出しをつけ、並べていますが、articleは1つ1つが完結していることになります。

特に要素を持たない場合は「div」、独立したコンテンツならarticle、そうでなければsectionということになります。場合によって使い分けていくことが大切です。

divとpの違いとは?

使っていて、たまに悩むのがdivとpの使い分けです。どのような違いがあるのでしょうか?

 pタグとは

pとはParagraphといい、段落を指定するためのタグです。<p>〜</p>で囲まれたタグは一つの段落として扱われます。HTMLでは文章を囲む際に多く使用され、文章だけでなく画像を囲むことも可能です。

divは一つのかたまりとして扱う、pは段落を指定して扱う。どちらとも要素を囲むことに使われています。ブロック要素という点が同じですね。
しかし大きな違いとしては、各ブロック要素の間に1行空白ができるかどうかという点です。pタグだと、文章終了後に1行空白ができます。

しかしdivは改行はできますが、空白が空くことがありません。pタグは中に別のブロック要素を入れることができませんが、divは中にpタグを入れることができます。つまり、divタグは入れ子をすることが可能です。
使い分けとしては、改行させたい場合はpタグ、装飾したい場合はdivタグを使うと使い分けることが大切です。

また、似たようなタグにspanというタグがありますが、これは特定の文字などを装飾したい場合に使用します。divやpと違いインライン要素となるため、pやdivなどの要素の中で使います。インライン要素とブロック要素の違いは、改行が入るか入らないかの違いとなります。

使い勝手が良さそうなdivタグですが、先ほどにも書いたように、あまり意味を持たないタグですので、とりあえずと使うのはおすすめしません。入れることができる場合には、適切なタグを使うことが必要です。どうしても使えない場合のみにdivを使います。

似ているようで、使い方が違うタグということが分かりました。

 まとめ

いかがでしたでしょうか?
見た目はちょっとした違いですが、実際に反映させるとなると根本的に違う要素ということがわかりました。タグの違いが分かれば、悩むことも少なくなるはずです。綺麗なコーディングができるように、これからも勉強してしっかり理解していきたいと思います。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月24日

デザインに行き詰まりを感じたとき、試す価値のある7の方法

デザインに行き詰まりを感じたとき、試す価値のある7の方法

「いいアイディアが思い浮かばない・・・」
「作ってみたけど思ったようなものにならない・・・」
「いつも同じようなデザインになってしまう・・・」
デザイナーであれば、一度はデザインすることに行き詰まりを感じたことがあるかと思います。
そんな時、あなたは自分が行き詰まりから抜け出せる方法を把握していますか?

私はデザイン(主にWebサイトのデザイン)の仕事をしているのですが、最近デザインに行き詰まりを感じることが多くなり、仕事中よく眉間にしわを寄せています。趣味でデザインをしているのであれば、時間を気にせず悩んだり、諦めてやめることも出来ますが、仕事ではそうはいきません。どんな案件にも遅かれ早かれ納期があり、時間を気にしつつ進めなければいけないし、嫌だからやめるなんてことは基本許されません。

行き詰まった時、自分ができることを把握しておくことが解決への近道になると思い、今回の記事では、デザインに行き詰まりを感じたときの対策をまとめてみました。デザイン関係以外の職についている方にも、参考になる部分があると思いますので、ぜひご一読ください。

デザインまとめサイトからインスピレーションを得る

この方法は、大半の方がもう実践済みですよね。今は多くのデザインまとめサイトがあり、質の良いデザインを効率よく探せるようになりました。
良いと思ったデザインはスクリーンショットを撮って、ピンタレストなどのコレクション機能があるサービスに保存しておき、行き詰まったときに見返すと何かヒントになるものが見つかるかもしれません。

優れた作品は眺めるだけでいい刺激になり、自分もこんなデザインが出来るようになりたい!というやる気が湧いてきませんか?もちろん、「きれいだな〜、かっこいいな〜」と憧れだけで終わるのではなく、そのデザインのどこを気に入ったのか、考えながら観察する癖をつけるようにすると、ただ眺めて終わりでなく、自分の身になっていくと思います。

私がよく参考にしているWebデザインのまとめサイトをご紹介します。

bookma v3!

このサイトの良いところは、ページの表示切り替えが出来るところで、通常は、よくみるグリッドレイアウトになっていますが、切り替えボタンをクリックすると1サイトが大きく縦並びに表示される形になります。予想以上に見やすい!
その他にも、クリックされた回数が多い順に表示できたり、検索カテゴリが多すぎず少なすぎず必要最低限なところも気に入っています。それと、ゴリラが可愛いです。

logostock

ロゴマークのデザインを集めたサイトなんかもあります。
ほとんどが日本の企業のロゴマークなので、配色やフォントの使い方が参考になります。

freepik

フリー素材サイトに頼るのもいいですね。freepikは、イラストのみならず名刺のデザインから写真素材まで幅広く網羅しています。
デザインの参考にするのもよし、素材として利用するのもよしです。(無料で利用する場合はクレジット表記が必要です。)

オフラインのデザインに目を向ける

先程も書きましたが、ネット上には国内外から集められた素敵なデザインが溢れかえっています。その上、パソコンやスマートフォンを開けば、いつでもどこでも見られるという手軽さや圧倒的な情報量から、どうしてもオンラインばかりに目が行きがちです。
ですが、ちょっとオンラインから離れて、オフラインのメディアに目を向けてみると、新鮮なアイデアが見つかる可能性があります。

毎朝家に届く折り込みチラシを見てみたり、美容室の待ち時間に雑誌を広げたり、スーパーで夕飯を買うついでに、いつもは通らない通路にある商品のパッケージを見てみたり、CMを流し見したり(個人的にテレビを消音にして見ると、デザインがいつもより入ってくる気がします)。

デザインから距離を置く

進まないデザイン案件は一旦横においておき、他の案件を進めましょう。
一番いいのはデザインから一旦離れて、コーディングや資料作成などの事務作業をすると、良い気分転換になります。別の作業をしている間に、閃くこともあるかもしれません。
なかったとしても、ただ悶々と悩んでいるより、進められるものを進めていたほうが有意義な時間の使い方が出来ますよね。

スケジュールに余裕があるのであれば、行き詰まったデザインを一日寝かせて翌日見てみると、どこに違和感があるか見つけやすくなります。

作業環境を変える

「環境を変える」と聞くと、まず「場所」を変えること思い浮かべると思います。

ノマドワーク(特定の場所ではなく、カフェやコワーキングスペースなどで仕事をする、場所にとらわれない新しいワークスタイル)を容認している会社はごく一部ですが、働く場所を変えることは、確実に行き詰まりに効果的です。場所を変えることで、気分転換にもなり発想が湧きやすくなるからです。

ですが、環境というのは「場所」のことだけではなく、「デスク周り」にも当てはまります。モノが散乱しているデスクを片付けるだけでも、気持ちに区切りがつき、仕事への集中力が高まります。
というのも、デスク周りにたくさんモノがあるだけで、気づかないうちに脳はそれらを情報として捉えてしまい、その分、目の前の仕事への集中力が欠けてしまうのです。整理する時間がない場合は、取り敢えず引き出しの中にでもいいので片付けてしまい、視界をすっきりさせることが大事です。

散歩をする

行き詰まれば行き詰まるほど、はやく終わらせなきゃという焦る気持ちで一杯になりますが、落ち着くためにも外へ散歩に出てみましょう。
スタンフォード大学の研究によると、座っているときより歩いている時の方が、約60%も新しいことをひらめいたり物事を生み出すクリエイティブな能力が向上することが分かっています。

流石に仕事中に職場を抜け出して散歩をするということは出来ない会社が多いと思いますが、お昼休憩やリフレッシュタイムに机に突っ伏しているのではなく、会社の周りを歩いてみたり、コーヒーを入れに席を立つだけでもリフレッシュになります。
ちなみに、屋内でも外を歩くのと同じ効果があるそうなので、真夏や真冬など気温の影響で外に出るのが億劫なときは会社の中をウロウロ歩き回ってみるというのもありですね。

ボーッと頭を空にして歩くのもいいですが、自然の中にはデザインのインスピレーションを刺激するものが多くあるので、注視しながら歩いてみるのも良いかもしれません。また、歩くことによってストレス解消、健康を保つ事ができるので、デスクワークが多く運動不足になりがちなデザイナーにとっては一石二鳥ですね。

他人にアドバイスを求める

ひとりで悶々と悩み込む前に、まわりにいるデザイナーの方に相談してみましょう。
作っているものが全体的にしっくりこない場合は「ぱっと見て、どうですか?」と率直な感想を聞くのもありですし、部分的に悩んでいるときは、「ここ、◯◯さんだったらどういう風にデザインしますか?」と聞いてみたり。
アドバイスをもらえるだけでなく、会話をすることで気持ちが和らぎ、精神的にも楽になります。

がむしゃらに作り切る

どんなにダサくなってもいいと割り切って、最後まで作り切る。
いいデザインが出来る出来ないの前に、形だけでもなんとかしないと仕事にならないので、とにかく作りきりましょう。
と言うのは簡単ですが・・・やるのはなかなか難しい。
これが出来てしまう人は、そもそも行き詰まらないと思うのです。この方法がとれるようになるのが理想ですよね。

まとめ

以上、7つの方法をご紹介しました。
これらを実行したからといって、すぐに行き詰まりが解消するわけではありませんが、解決への近道になることは確かです。
行き詰まりは、次のステップに進むために必要なこと。行き詰まっている間は本当に辛いですが、お互いに一人前のデザイナーを目指して頑張りましょう。

このエントリーをはてなブックマークに追加
メルマガ登録
1 2 3 4 5 6 7 9