こんにちは。まちいろのデザイナー楓子です。
デザインには写真は不可欠。
ということで、ここ数回テーマは写真加工・写真についてなどのお話を
させて頂きたいと思います。
写真加工の技術紹介をしているところは多いですが
ここではもう一歩踏み込んで
よりいい写真を完成させるための流れを紹介していきます。
※いい写真というのは意図やストーリー性の感じるものです。
写真に物語やその物のらしさ感が出ているとより見る人側の印象に残ります。
第1回目は「暗い写真を明るくする写真修正の全体の流れ」です。
では「暗い写真を明るくする写真修正の全体の流れ」をご説明します。
皆さま、暗い写真に気分まで真っ暗なんて経験はございませんか？
私自身「影がつきすぎて顔が怖い」「全体的に写真が黄色っぽ過ぎる」など、
様々な事がありました。
そんな悩みを一緒に解決していきましょう。
今回はこのように写真を修正していきます。
大まかな流れ
今回話すことをざっくり箇条書きすると・・・・
・始める前に大切なこと：写真のらしさ感を考慮し修正度合いの判断
①ヒストグラムを確認。色、明暗バランス把握。
②新規レイヤーの作成
③対象物(オブジェクト)の選択
④色調補正
上記、３点について話していきます。
第2回目以降からはこの1回目の補足として、詳しい情報を付け足していきます。
始める前に：写真の「らしさ感」を考慮し修正度合いの判断
らしさ感を考慮することで主役である被写体がより生き生きしていきます。
意味わかりにくいので具体的に。
この写真であったら
どすこい感を出したいので、
重量のある犬＝どすこいと言うワードから
・寒色よりは暖色寄り=被写体の犬は少し赤味を入れよう。少し暗くすることで重量感を。
・背景より主役が目立つようにしたい＝背景の色を補色であるシアン調整+明暗調整
といった具合です。
難しいかも知れないのですが、簡単な方法としてはまず
・どすこいのように明確なタイトルをつけておく
・そこから写真修正の計画を練っておく
何も考えず修正してしまうと、効率が悪く、その上そのものの良さを消してしまう恐れもあるのでお勧めできません。
例えば、優しげで綺麗な女将さんというタイトルをつけるとします。
それなら、美白にして全体的なコントラストは抑えて、色バランスを均等にした方がいいと考えられます。
高級感があっておいしそうな卵かけご飯なら、背景は暗めにして、商品は彩度高めにしてそのものの主役感を上げよう。など。
いろいろと判断が出来るわけです。
写真に限らずデザインをする時は常に「らしさ感＝そのものがまとっている雰囲気」意識するようにしてください。
①ヒストグラムを確認する。色、明暗バランス把握。
ヒストグラムとは簡単に言うと、写真の色バランス、明暗などが一目で分かる表です。
これを見て、全体の仕上がりをどう調整するかを判断します。
まずはヒストグラムを開いてください。
ウインドウ＞ヒストグラムにチェックを入れるとワークスペースに出てきます。
②新規レイヤーの作成
新規レイヤーを作成してください。
Photoshopは元に戻る機能はありますが、限られている為元の画像は残し
コピーのレイヤーを作成して、そちらを修正していきます。
簡単に言うと、写真の色バランス、明暗などが一目で分かる表です。
これを見て、全体の仕上がりをどう調整するかを判断します。
つまりこの図からは暗いエリアにはシアンが多く、明るいエリアにはマゼンタが多い
中間明度にはイエローやグリーンが多いと言うことがうかがえます。
この写真中間明度が多いので、全体的にイエローとグリーンが中間色に多い形になっています。
ということは、自然な写真に近づけるにはシアンとマゼンタを調整すればいいのです。
③対象物(オブジェクト)の選択
色など変更を加えたい箇所を囲っていきます。
いろいろなツールがありますのでそれぞれ用途にあったものを使うと良いかと思います。
今回は規則性の無い線（毛)なのでなげなわツールを使用します。
対象物を選択したら、メニューバー選択範囲＞選択とマスクで境界線を調整します。
そのままだと、境目がはっきりしすぎて修正する時に不自然になるので
境目をぼかします。バーを調整して境界線をぼかしましょう。
④色調補正
色調修正は色々なツールがあるので、自分に合ったものを使うと良いかと思います。 主に使われるもので、自分自身もこれは外せないというものを紹介していきます。
メニューバーのウインドウ＞メニューバーのイメージ>色調補正
を開きます。
色調補正のアイコンの名称を一覧にしてみました。 その中でも特に使う３つの説明をします。
レベル補正
ヒストグラムがうっすらと見えています。 このバーを移動させることで、明暗の調節が可能です。
トーンカーブ
レベル補正と同じく、線の下にあるグラフはヒストグラムと同じものです。背景は明暗の量を表しています。 明るくしたい時はこの斜めの線を上にやり、暗くしたい時は下に線をドラックします。
カラーバランス
カラーバランスは色の調整を行う時に便利です。 自分の変えたいイメージに合わせて、変更しましょう。
最後に
ここまでお疲れさまでした。
写真加工は奥が深いので、これでもまだまだ書き足りないのですが
ここをまずおさえていただくとだいぶ写真を思う通りに修正できるようになります。
次回以降の補足によってまた詳しく書きますので、今後ともよろしくお願い致します。
また、何かここはこの方がいいのでは？という疑問やもっと詳しく説明して欲しいということがありましたらコメント頂ければと思います。
レスポンシブデザインサイトのCSSの読み込み設定
こんにちは、まちいろの門田です。
昨今ではスマートフォンを利用される方は当たり前のように世の中に溢れているわけですが
それに伴ってWEBサイトもスマホユーザー向けのサイト、
むしろ閲覧されるデバイスがスマホが基本となっているサイトも多く見られるようになってきました。
今後もPC、スマホ両方での閲覧を考慮されたWEBサイト開発が主流となってきます。
そこで今回はそんな複数の画面サイズに対応した「レスポンシブデザイン」を作成する上で
知っておきたいCSSの読み込み設定を記したいと思います。
（自分用の備忘録でもあります。）
１ 画面幅の違いで読み込むCSSを選り分ける。
一番簡単、というわけではないですがおそらく一番直感的に書ける手段かと思います。
また画面幅読み込みにも二通りございます。
- css側で範囲を指定する。
- html側で範囲を指定する。
CSS側で範囲を指定する。
css内で適用する画面幅の最大あるいは最小のサイズをメディアクエリで指定して（または同時）、
その範囲内で書かれたcssはその指定幅の時のみ有効となる方法です。
cssを分けずに管理したい場合などに有用です。
@media screen and (max-width: 768px) {
h1{
font-size:15px;
color:#333333;
}
}
上記のものは「画面幅最大768px」まで適用されるcssになります。
ですので769px以上の画面では適用されません。
@media screen and (min-width: 768px) {
h1{
font-size:20px;
color:#000000;
}
}
逆に上記のものは「画面幅最小768px」まで適用されるcssになります。
767px以下の画面では適用されません。
@media screen and (min-width: 768px) and (max-width: 1000px) {
h1{
font-size:18px;
color:#ff9922;
}
}
そして上記のものは最小値と最大値の同時指定になり、「画面幅768px〜1000px」のみ適用されるcssとなります。
タブレット用のサイト構成、あるいは500px〜800pxなどのPCとスマホの中間にあたる
画面幅内でのデザインを設計する際には利用されるシーンが多いかもしれません。
また、逆の指定方法は
@media screen and (max-width: 768px),screen and (min-width: 1000px) {
h1{
font-size:18px;
color:#ff9922;
}
}
上記のようにカンマ区切りで指定すると「画面幅768px以下、あるいは画面幅1000px以上」
というように指定することができます。
あまり使うケースはないかもしれませんが、特定の範囲内のみcssを適用させたくない際などに
有用かと思われます。
HTML側で範囲を指定する。
html側でcssを読み込む際linkタグでcssを読み込みますがその際に画面幅で読み込むcssファイルを指定します。
cssファイル自体を画面幅ごとに管理している場合はこちらが有用です。
ファイル内でのメディアクエリ内への入れ忘れや、その範囲を探しに行くことなどを考えるとこちらの方が私的には好きな管理方法です。
<link rel="stylesheet" href="style_pc.css" type="text/css" media="screen and (min-width: 768px)">
上記の様にlinkタグ内でメディア属性を指定し、範囲を記述してあげれば完了です。
「画面幅768px以上」の時のみ、style_pc.cssが読み込まれるようになります。
<link rel="stylesheet" href="style_tab_sp.css" type="text/css" media="screen and (max-width: 767px)">
上記のものは「画面幅767px以下」の時に、style_tab_sp.cssが読み込まれるようになります。
また、こちらもandやカンマを使えばcss側同様に同時指定ができます。
２、デバイスの違いで、読み込むCSSを選り分ける。
画面幅ではなく、閲覧している端末をjavascriptで判定して読み込むcssを切り替える方法になります。
スマートフォンと一括りに言っても、多種多様な画面幅があるため最新機種が出るたびに画面幅調整に
走るよりかは端末を判定してしまったほうが容易かもしれません。
もちろん、先ほども言ったように画面幅が多くあるためその分スマホ全てが同一のデザインでは一部機種では
見難い形になってしまうケースもあると思われますので画面幅で選り分けるか、デバイスで選り分けるかは
作成されるレスポンシブデザインを鑑みて実装されるのが一番でしょう。
デバイス情報の取得
javascriptでデバイス情報は
navigator.userAgent
で取得することができます。
navigator.userAgent.indexOf('iPhone')
この様に指定すると、navigator.userAgentで取得した情報内に
iPhoneがあった場合その「発見位置」を返してくれます。（1以上）
逆にiPhoneがnavigator.userAgentにはない場合は「-1」が返ってきます。
ですのであとはif文を用いて条件分岐を作成すればデバイスごとのcss読み込みを記述することができます。
iPhone同様にiPad、iPod、Androidを指定できます。
var iphone_flag = navigator.userAgent.indexOf('iPhone');
var ipad_flag = navigator.userAgent.indexOf('iPad');
var ipod_flag = navigator.userAgent.indexOf('iPod');
var android_flag = navigator.userAgent.indexOf('Android');
if(iphone_flag > 0){ //発見されない場合-1が返ってくるので0以上で指定する。
<link rel="stylesheet" href="style_iphone.css" type="text/css"> //iphone用のcss
}else if(ipad_flag > 0){
<link rel="stylesheet" href="style_ipad.css" type="text/css"> //ipad用のcss
}else if(ipod_flag > 0){
<link rel="stylesheet" href="style_ipod.css" type="text/css"> //ipod用のcss
}else if(android_flag > 0){
<link rel="stylesheet" href="style_android.css" type="text/css"> //android用のcss
}else{
<link rel="stylesheet" href="style_pc.css" type="text/css"> //それ以外の際に読み込むcss
}
また条件分岐の中でも
f(iphone_flag > 0){
<link rel="stylesheet" href="style_iphone_min.css" type="text/css" media="screen and (min-width: 320px) and (max-width: 400px)">
<link rel="stylesheet" href="style_iphone_max.css" type="text/css" media="screen and (min-width: 401px)">
}else{
<link rel="stylesheet" href="style_pc.css" type="text/css">
}
を用いて画面幅指定をすればより詳細なcssの設定をすることができます。
HTML側でのviewport指定
レスポンシブデザインにおいて上記の画面幅やデバイス読み取り設定の他に、
忘れてはいけないことがmetaタグでのviewport指定になります。
これを指定しないで実装すると、画面幅を指定しているにも関わらずスマホで表示した際などに
こちらが想定したデザインとは違うサイズなどで表示されてしまったりします。（画像サイズやフォントサイズなど）
それらはサイト自体の表示幅の設定を施していないために起きてしまう現象です。
<meta name="viewport" content="width=device-width,initial-scale=1">
上記のmetaタグをhtmlのhead内に記述すれば画面幅に準じて、サイズなどが調整されるようになります。
content内のwidthで表示幅を指定します。
device-widthを指定してあげることで表示しているウインドウ幅がデバイスのサイズに基づきます。
<meta name="viewport" content="width=320px,initial-scale=1">
数値を指定してあげればどのデバイスでアクセスしてもそのサイズ幅を基準として表示されます。
しかしメディアクエリを使用している場合はviewportでのwidth指定で特定の数値を設定すると
スマホ側での表示がおかしくなってしまう場合があります。
（サイト表示時、やたらと大きくズームされて表示されたり）
ですのでメディアクエリ使用時には「width=device-width」を指定してあげるのがベストです。
initial-scaleは拡大率となります。基本的に1を指定するのが無難です。
他にもあまり使用されるケースはないかもしれませんが拡大の最大最小率や拡大の許可なども合わせて指定できます。
より掘り下げて調べてていただければもっと詳細な設定がいくつも出てきますが
「とにかくレスポンシブデザインを作ったので、読み込ませたい」という方は下記metaタグをheadに貼りましょう。
<meta name="viewport" content="width=device-width,initial-scale=1">
他の実装方法など
これらを用いないでもWordPressであればデバイス切り替えのプラグインなどもありますし、
Rubyで構成されたサイトでもデバイス切り替えのgem(便利機能のライブラリ)などがあり
cssに限らずコードの出し分けをする手段は様々です。
案件の仕様によって、後々の編集が容易な柔軟性の高い形で実装するのが一番望ましいでしょう。
Atom（テキストエディタ）で初めに設定しておくと便利な機能
こんにちは、まちいろの井上です。
HTMLやCSSをコーディングする際には、テキストエディタが必要になってきますよね。
私はこれまでSublime Text3を利用していたのですが、まちいろではAtomを利用しているメンバーも多く、社内でのCSS勉強会の際もAtomの機能の説明が登場したので、これを機に私もAtomを使ってみようと思い、初めてインストールしてみました。
そこで今日は、AtomのHTML・CSSコーディングを行う際に初めに設定しておくと便利な機能をご紹介したいと思います。
インストール
Atomのページからソフトをダウンロードし、exeを実行しインストールを行います。
設定しておくと便利な機能
半角スペース、タブの可視化
デフォルト設定では、半角スペースなのか、タブが挿入されているかを見た目だけでは判断することができません。そこで、半角スペースなのか、タブなのかがわかるように設定していきたいと思います。
Fileメニューの「Settings」を選択し、「Setting」タブを表示します。
「Setting」タブの左メニューの項目から「Editor」を選択し、下にスクロールしていくと「Show Invisible」という項目があるのでチェックを入れます。
すると、以下の図のように半角スペース（ ・）、タブ（ ≫）、改行（ ¬）を可視化することができます。
インデントに縦線を表示する
先程と同じように「Setting」タブの左メニューから「Editor」を選択し、「Show indent Guide」にチェックを入れます。
すると以下のようにインデントに縦線が表示され、HTMLのタグの構造がわかりやすくなります。
Tabの設定（タブ表示、半角スペース表示の切り替え）
Tabキーを押下した際に、通常のタブ入力（ハードタブ）にするのか、あるいは半角スペースを複数個使用することでタブの代わり（ソフトタブ）にするのかを設定することができます。
①「Setting」タブの「Editor」の中の「Tab Type」がデフォルトではautoになっているので、これをhardまたはsoftに切り替えることで設定が可能となります。
②タブのインデント幅はデフォルトで半角スペース2つ分になっていますが、「Tab Length」から半角スペースの数をお好みのサイズに変更することが可能です。
共同で開発をしている場合は、ハードタブにするのか、ソフトタブにするのか、また半角スペースは何個にするかなどルールがあると思うので、開発前に設定しておきましょう。
HTMLタグを自動で閉じる
HTMLを書いていると、自動でタグを閉じてほしいなと思ってしまいます。
そこで開始タグの>を入力すると、自動で閉じタグを入力してくれるパッケージautoclose-htmlをインストールしたいと思います。
①「Setting」タブの左メニューから「Install」を選択し、Install Packagesの検索欄にautoclose-htmlを入力して検索します。
②検索するとパッケージの候補が表示されるので、対象のパッケージをインストールします。
インストールが完了すると、開始タグを閉じたタイミングで自動で閉じタグを入力してくれるようになります。
全角スペースを表示する
HTMLタグの中や、CSSの中に全角スペースが入っていしまい、レイアウトが思うように表示されないという経験はありませんか？
そんな時に役に立つのが、全角スペースを表示してくれるパッケージshow-ideographic-spaceです。
インストールすると以下のように、全角スペースを表示してくれるようになります。
最後に
今日ご紹介したのは本当にごく一部の設定で、Atomにはたくさんのパッケージが準備されています。
ぜひ色々なパッケージを試して、ご自身の開発しやすい環境にカスタマイズしてみてください。