ホームページ制作Fの業務を月ごとにご紹介

2014年10月31日(金)
自分だけのワークスペースの作り方

IllustratorやPhotoshopを使いこんでいくと、だんだん自分がよく使うパネルや機能が分かってきます。

ところがわざわざ自分の使いやすいようにパネルを配置しても、
違うユーザーが使用して配置を変えたり、Illustratorが強制終了すると配置が変わってしまいます。

そこで自分だけのワークスペースを作っておけば、
いつでも自分の使いやすい配置に戻すことができます。

変更したワークスペース

作り方は簡単。
自分が使いやすいようにパネルを配置して
「ウィンドウ」→「ワークスペース」→「ワークスペースを保存」を選んで、
任意の名前をつけて保存するだけ。

メニュー画面

これでいつでも自分の使いやすい配置にすることができます。

Photoshopも設定できます。
Photoshopのメニュー

Photoshopはメニューやショートカットも同時に保存することができます。
Photoshopの保存画面

因みに、IllustratorもPhotoshopもショートカットやメニューのカスタマイズもできます。
ショートカットを新たに割り振ったり、別のキーを割り当てたりすることができます。

Illustratorは「編集」→「キーボードショートカット」で設定
Illustratorのショートカットメニュー

Photoshopは「ウィンドウ」→「ワークスペース」→「キーボードショートカットとメニュー」で設定
Photoshopのショートカットメニュー

毎日使うソフトなので、いつもの場所にいつものパネルがあると探す手間も省けて、
作業効率のアップにもつながります。

自分用にパネルの配置にこだわってみるのも面白いものですよ。

2014年10月31日(金)
私自身の人生も大きく変えることが出来ました。

私自身の人生も大きく変えることが出来ました。
リニューアル前は、
2ヶ月新規のお問い合わせ0でしたが、
現在では、1.5件ほど毎日頂いております。
アクセス解析ではどう変化したのか、
順位は変わっていないのですが、アクセス3倍以上
ページビューは5倍以上
順位が変わらなくても、ここまで進化することが出来ました。
トップページ以外も全て作りこんだ結果このような結果になりました。
少しでも参考にして頂けると幸いです。
Fのリニューアル後のアクセス

2014年10月31日(金)
人生を変えることが出来ました!

前回のセミナーで、私が無料で教えている人が、
0の売上からインターネットの物販で2400万円売れている。
望月さんありがとう!!と言われて、嬉しかったので、
なにか送ってきて!!というか、ホームページ頼んで!!といったら、、煎餅をくれました☆
ホームページで売れなかったので、
サラリーマンに戻ろうと思っていた人でした。
人生を変えることができてほんとうに嬉しく思います。
ありがとうございます!こういう方を輩出していきます!
お客様に贈り物を頂きました。

お客様の声も頂きました。
昨日はセミナー、ありがとうございました。
望月先生とT先生のわかりやすい事例説明で大変勉強になりました。

さて、私は、子供服のメーカーに26年間勤め、10年前に独立、子供服店を自営、
順調だったが、2年後近くに大手の子供服小売、西松屋ができ売上30%ダウン↓

これを機にネットショップに取り組むも一年間、売上ゼロが続き、眠れない日々も続きました。
もう一度、サラリーマンに戻ろうかとも考えました。

そんなときに出会ったのが43Pのマニュアルです。
当時、24800円はだめもとで、藁にもすがる思い(ごめんなさい!)で購入しました。

何も知らなかったので、43Pに書いてあるマニュアル通りにサイトを修正していきました。
大阪のセミナーにも参加しました。
すると、キーワードで100位どころか1000位圏外だった順位が100位圏内にすぐ入り、
1ケ月ほどで20位内また、3ケ月くらいで10位内に入り、初めて売上が上がるようになりました。
冬場に水着が1枚売れました。実店舗での売上よりも本当にうれしい売上でした。

7年前の当時でも、対象キーワードの商品は楽天でも100社以上が扱い、
後発のスタートだったので、このキーワードだけに絞って、商品と情報をアップしました。
43Pをスタートして1年後には、対象キーワードで1位になり、今までずっと1位をキープできています。
1位になってからは、倍々ゲームのように売上が上がるようになりました。43Pのおかげです。

7年間0だった売上は、
現在、43Pに投資した24800円の1000倍の2400万円まで達成することができました。
なによりも43Pのセミナーに参加して、同じ仲間と一緒に学んだことが励みになりました。
本当にありがとうございます。
これからも、セミナーに参加して頑張ります!

0から2700万売上を上げた人との2ショット

2014年10月30日(木)
スポット修復ブラシツールについて

フォトショップのレタッチツールの一つに「スポット修復ブラシ」ツールというのがあります。
このツールはどういうものかと言いますと、簡単に言えば、写真の不要な部分を取り除くツールです。
スポット修復ブラシツール
今回はこのツールについてご紹介します。

雲の写真
こちらの雲の写真に、スポット修復ブラシツールを使って色々とレタッチをしていきます。

スポット修復ブラシツールを使った不要物の取り方

まず、赤い○で囲んだ箇所の雲を消していきます。 赤い○で囲んだ箇所を消していきます 適当なブラシサイズにして雲を塗りつぶします。 雲を塗りつぶします 雲が消えました! 雲が消えました

種類に応じて使い分けるのがおすすめです

実はこのツール、効果の種類が3種類あります。

・「近似色に合わせる」・・・選択した中から領域を自動的に検出して、周りの色と合わせて塗りつぶされます。
ちなみに先程のはこの方法でやりました。


・「テクスチャを作成」・・・選択範囲内に、テクスチャを塗りつぶします。
あまりなめらかなものには向いていないみたいですので、凹凸のものに使うといいかな?と思います。
テクスチャを作成

・「コンテンツに応じる」・・・選択したものの近くにあるもので範囲内を塗りつぶします。
コピースタンプツールとちょっと似ていますが、「コンテンツに応じる」の方がより自然に馴染んでくれます。
コンテンツに応じるその1

コンテンツに応じるその2

電線を消してみました

ビフォー
ビフォー
アフター
アフター
少し雑ですが、電線が結構綺麗に消えました。

こちらも「近似色に合わせる」を使って消してみました。

ぜひ用途に応じて使い分けて、より綺麗な写真を作るのに役立ててください!

2014年10月29日(水)
SEOに配慮したページを作るために役立つツール

SEOでは色々注意しなければいけない事がありますが、
人間の目だけで判断するのが難しい、面倒...という事が沢山あります。


そこで今回はSEOの点から、知っているとちょっと便利なツールをご紹介します。


リンク切れチェックに便利な「ウェブサイト・エクスプローラ」

ウェブサイト・エクスプローラの画面

ホームページ:http://www.umechando.com/webex/


リンクが繋がっていない画像やページがあって、
気付かず放置していると検索順位を落とす原因になるかもしれません。


また、バナーなどにリンクを貼っていて、
クリックしたら「404 Not Found」と表示された...となりますと、
ユーザにとってもとっても不親切なサイトになってしまって良くありませんね。


ウェブサイト・エクスプローラーを使うとhtmlで作成したページだけでなく、
画像のリンク切れも検査してくれるので、
「このページのここの画像が表示されていないようだけど?」という事も事前に防げ、
CSS、Javascriptのリンク切れまで分かるので、コーダーさんに特にお勧めしたいです。


検索エンジンでタイトルがちゃんと表示されるか確認するなら文字数カウント

文字数カウントサービスページの画面

ホームページ:http://www.090tool.info/c/


SEOで最も重要な要素とも言えるtitleタグdescriptionタグですが、
文章を長くいれすぎると検索結果に表示された時文章が途中で切れてしまうし、
だからといって短すぎる文章にしたらグーグルに最適化されて全く違うテキストに
変更されてしまうし...と意外と困る方もいらっしゃるはず。


目安としては、titleは30~35字以内、descriptionは124字以内といったところでしょうか。


そこで、タイトルのテキスト作ってみたけど検索結果に全文表示されるだろうか...と
気になる場合は、作成した文章を入れたら文字数をカウントしてくれる
文字数カウントサービスでチェックするのがお勧めです。

逆に、文字数が少ないからあともう少し文字増やせるな、とはかるのにも便利です。


コピーサイトか気になるページがある時にお勧な類似ページ判定ツール

類似ページ判定ツールサービスの画面

ホームページ:http://sujiko.jp/


最近のSEOの傾向として、コピーサイトがあるサイトは順位が落ちる傾向にあるようです。


そこで、自分のサイトのこのページとこのページはコピーサイトとして
グーグルに認定されない?と調べるのに、機械的にどこまで似ているかを
チェックしてくれる類似判定ツールがとっても役に立ちます。


同じようなページを量産してコピーサイト判定されないか心配な方は、チェックしておきましょう。

上記はあくまで一例ですがどれも覚えているととても便利なので、
ホームページ制作中の方は是非試してみてください!

2014年10月28日(火)
流行りに振り回されないホームページデザインをする。

ウェブデザイン界を騒がせるフラットデザイン

flat001.jpg

巷ではフラットデザインなるものが大流行のようです。

初めて聞く方もいらっしゃると思いますが、要は凹凸や影をなくして基本的に色のみで

平らに(フラット)区切るデザインのことを指すようです。

今日はそのフラットデザインがなぜ生まれたのかをご説明したいと思います。


フラットデザインは定義もなく、誰が最初に発明したかなどは一切の不明ですが、

今の環境に適応していこうとしたら自然に生まれたデザインといえるかもしれません。


一昔前ですと電車の中ではカチカチカチカチとケータイをいじっていましたが

今はみーんなスマホでゲームやラインを楽しんでいます。

ホームページを見る人もスマホからの割合が年々増えてきて今は6割超えるページも珍しくありません。


iphone.jpg


小さい画面で頑張っても無駄?

スマホの画面はPCに比べとても小さいものですので、

細かく精巧にデザインをするより、パッとひと目で分かるシンプルなデザインのほうが好まれます。

せっかく時間をかけて作りに作りこんだアイコンが「見にくい」「ごちゃごちゃしててわかりにくい」

のデザイナーにとって絶望の一言で片付けられてしまいます。


スマホは縦/横、さらにはiPadなどのタブレットも有りますので、

その大きさごとにデザインをし直す必要もあります。

これがこれが作りこまれたデザインだともう大変です。

今までですと環境に合わせたデザインを3,4パターンと作らなくてはなりませんが、

フラットデザインはベタ塗りが殆どですので、CSS等で簡単に対応することができます。


じゃあこれからは全部フラットになるの?

flatrich.jpg

上のような理由で爆発的に増えていますが、良い所ばかりでもありません。

フラットデザインにも不得意な分野があります。


・明るい色が増えるためかっちりしたページには向かない...葬儀、遺品整理のサイト、企業サイトなど

・ムダを省くデザインになっているので個性が失われやすい

・凹凸がないのでどこがクリックできるかわからない

・一つ一つの部品は簡単に作れるけど、バランスの配置が非常に難しい。...慣れない人がするとただの手抜きに見えます。

まだまだできたばかりの分野ですので、これからの発展で解消されるかもしれませんね!

流行に振り回されないデザインを!

フラットデザインはあくまでも選択肢の一つであり、絶対グラデーションを使っちゃいけない

影をつけちゃいけないと、変な定義にとらわれるでもなく、見る人にとって一番使いやすいと思う

デザインを心がけるといいと思います。


グーグルさんは流石というべきか、見事にフラットデザインを取り込みつつ個性を出しています。

興味があれば「マテリアルデザイン」で検索してみてくださいませ。

実際私は一度フラットデザインにこだわりすぎて大失敗をしました。。。


ただ、引き出しを増やしておけばそれだけ幅のある表現ができますので、

覚えておいて損はないと思います。

良い所だけ盗んで自分のデザインに出来るよう頑張りたいと思います!

2014年10月27日(月)
イラストレーターのブレンド機能について

ブレンドについて
上の図のような2つの図形の間にいくつか同じものを追加したい時にブレンドという機能があります。
まず2つのオブジェクトを用意して
オブジェクト→ブレンド→ブレンドオプションで下のボックスを表示させます。
ブレンドオプションのボックス
ここで「間隔」にステップ数を選び用意した2つのオブジェクトの間に入れたい個数を入れます。
再度、オブジェクト→ブレンド→作成で
ステップで作られたオブジェクト
このように自動的に色を段階的に変えたオブジェクトが出来上がります。
ただこの状態では各三角形を個別に動かすことができません。
バラバラに動かしたい場合はオブジェクト→ブレンド→拡張を選択します。
この状態でグループ化されているので解除すると個別に動かせます。


ブレンドには「ステップ数」以外に「スムーズ」と「距離」があります。
左側に正方形を右側に星を配置しました。
「スムーズ」を適用させると
スムーズを適用
グラデーションのように色も形も滑らかに表示されます。


「距離」を適用させると
kyori.jpg
指定した距離ずつ移動し、少しずつ形を変えたオブジェクトになります。


一つずつのオブジェクトにきれいに段階的な色をつけたいときなどにとても便利です。
使い方によりいろいろアレンジもできると思いますので、利用してみてください。

2014年10月24日(金)
Photoshopでの画像回転

Photoshopでパスを使用しているときやイラストを作成している時に、
画像をくるくる回転できたら便利だなーと思うときにオススメなのが、

blog.jpg

ツール部分の

blog4.jpg

手のマーク部分を長押しすると「手のひらツール」と「回転ビューツール」が
出てきますので「回転ビューツール」を選んでください。

あとは画像の上にカーソルを置いてマウスをずらすと画像がくるくるまわってくれます!

blog2.jpg

blog3.jpg

左上で角度を直接入力したりもできますし、元に戻したいときは「ビューの初期化」を押すと元に戻せます。

とっても便利なので回転が必要なときは使ってみてください!

2014年10月23日(木)
画像の合成モード

フォトショップでもイラストレーターでも、画像編集ソフトならだいたい搭載している
合成モード機能。
簡単に言うと、重なった2つの画像の色を混ぜる機能ですが、
何やらこんなに選択欄が...。

141023_mode.png

触り始めた頃はこれの存在する意味がまったくわからず、
ずいぶん苦しめられたものです。
(では今、正確に理解出来てるかというと相当怪しいですが)

わからないなりに、適当に触ってて理解した限りだと、

141023_mode_2.png

ざっくり言ってこんなかんじです。
線で区切られた項目ごとに、
おおまかな効果が変わります。
概ね、
・乗算(暗くなる合成)
・スクリーン(明るくなる合成)
・オーバーレイ(鮮やかになる合成)
の3系統を多く使います。

基本的に合成後に、(フォトショップの場合)レイヤーの透明度を変更することで、
変化の度合いを調整します。
以前の記事にも地味に使ってます。
写真補正からボタンなどのパーツ作成まで、
あらゆるところで大活躍します。

さてところで、「謎ってなんだよ!」と思われた方、すみません。
直感的に、結果がどのような色となるか想像しづらく・・
基本あまり使いません。

ホームページの写真、
自分で画像作成してみようかな、という方は、
頭のすみにでも留めておいていただければ幸いです。

2014年10月22日(水)
CSSが一部利かないを解消する方法

前回、CSSが利かない時に見直すポイントという記事を投稿しましたが、
今回は更にステップアップした、CSSを設定する時の注意点をご紹介します。


例えば下の図のようにテキストを入力して、
○行目のテキストだけは赤色にして、他のテキストは青色にしたい...とするとします。

まずはhtmlでリストを用意。

サンプルのhtmlを用意

今回は1行目と2行目を赤色にして、それ以外は青色にする事にします。

htmlは以下のように作成。

サンプルのhtmlの中身

CSSは以下のように作成。

サンプルのCSSの中身

ブラウザで確認してみると...何故か全て青いテキストに!

何故かCSSが適用されていない

class名の指定も合っている筈...という事で、ブラウザに搭載されている機能「要素を検証」でCSSをチェック。

ブラウザの要素の検証機能

すると、<li>の中に入れたclass「css2」が無視され、
divに指定したidで指定したスタイルが強制的に適用されていました。


CSSのルール上、classよりもidでの指定が優先されたり、
子要素のid・classより親要素のid・classでの指定が優先されるなど複雑なルールが存在しています。


div要素にあったidでの指定を取り消して、赤色と青色それぞれにclassを付けてCSSを設定すれば解決できますが、
これだと今後テキストが追加された時にいちいちclassを指定しなければいけないので手間がかかります。

作成に手間のかかるhtmlの例

そこでhtmlを書き換えず、CSSも最初の記述の原型を留めたままでCSSの指定を必ず読ませる便利な技があります。


以下のCSSをご覧ください。

!importantを指定したCSS

class「css2」の色指定に「!important」と追加しました。それ以外は最初に作成したCSSから変わっていません。


「!important」はCSSのルールを無視して再優先で読み込ませる、ある意味掟破りの単語です。


ブラウザで「!important」追加後のページを見てみると、css2を指定した文字がちゃんと赤くなりました。

思い通りにCSSが利いた状態のhtml

むやみに!importantを使うのも避けたいですが、
div要素やsection要素が増えすぎて子要素にかけたCSSが利かない...という問題が発生したら、
この方法で解決するのも1つの手ですね。

2014年10月21日(火)
Illustratorでパターンの柄を変形させない方法

Illustratorでデザインをする時、ちょっとしたアクセントや雰囲気を出すため、
画像の背景データをパターン柄としてスウォッチに登録して使いますよね。


デザインの中で試行錯誤しながら大きさや配置を決める途中で、
そのパターンを使用したオブジェクトの縦横比を変更すると、
その動作に準じてパターン柄も変形してしまい、
「ああ、また塗り直し・・・」となってしまうことはないでしょうか??
パターンが変形してしまった画像

数ピクセルの変形で、Illustrator上では見た目の変化がない時も、
コーディングしようと画像に書き出したら謎の線が入ってしまうことがあります。
Illustratorデータ上ではないのに、書きだした画像に白い横線や縦線が入ってしまう時は
このパターンの縦横比が狂ってしまっていることが原因なことが多いです。


私はパターンが変形することに結構な期間、頭を悩ませており
もう打開策はないのだろう、一緒に変形するものなのだろうと思っておりましたが
色々触ってみていたら発見しました。もう少し早く知りたかった・・・


まずここの、右から二番目の【ドキュメント設定】をクリックします。
Illustratorのメニューバー

そうして出てきたウィンドウの、【パターンも変形する】のチェックを外します。
メニューウィンドウ

悲しいことに、、それだけです。
それだけで、パターンを使用したオブジェクトの変形は自由自在です!
自由自在ではなかった私にとっては作業が快適になりすぎて幸せです。
パターンの融通がきく

Illustratorを使用する人は当たり前にこの設定になっているのでしょうか。。。
今のところ、このチェックを外すことのデメリットは生じていませんので
メリットしかないんだろうと思っています!


この不自由さに苦しんでいる方が一人でも楽になりますように・・・!
今週も頑張ります!!

2014年10月20日(月)
写真枠の作り方

1020_2.jpgホームページに画像を配置する時、よく写真の枠を付けることがあります。
普通に白い四角をしいて、ドロップシャドウをつける...でもいいのですが、
今回は一手間かけてより見栄えのいいものにする小技を紹介します。
1020_3.jpg
まずはいつもどおり、写真の下に一回り大きな白い四角を作り、
それを同じ位置にコピーして色を濃い目のグレーにします。
そして下の辺の真ん中の一に、アンカーポイントを追加し、
アンカーポイントの切り替えツールでパスが曲線を描けるよう
適当にハンドルを伸ばします。
1020_4.jpg

作ったポイントを、ダイレクト選択ツールで移動させ、
下の辺が曲線を描くようにします。
1020_5.jpg
アピアランスでぼかし効果を加え、乗算モードにして白い枠の下に敷くと...
1020_1.jpg
ドロップシャドウで影をつけるより、より立体的で写真っぽさが増します!
影のはみで方や濃さは調整して、いい感じにしあげてください。

ちなみに、毎回これを作るのは少し面倒...なので、
一つ作って素材としてIllustratorのデータとして保存しておくと
さっと使えてとても便利です!

2014年10月17日(金)
Illustratorの不透明マスクの作り方

不透明マスクを使った写真

Illustrator上で写真と背景を途中から馴染ませる時に使用する不透明マスクについてお話いたします。

上の写真のように背景と写真が徐々に馴染むように処理する場合、
Photoshopで加工した写真をIllustratorに貼りこむという方法もありますが、
その場合、馴染ませ加減を変更する時はいちいちPhotoshopに戻らないといけません。

しかし、Illustratorの不透明マスクを使用すれば、すべてIllustrator上で処理できます。

不透明マスクの作成手順

元画像

まず、塗りを白と黒のグラデーションにした四角を書きます。
※ぼかしたい方が白になるようにしてください。

グラデーションを引いた画像

次に、グラデーションの四角と写真を同時に選択して、
透明パレットの右上の「▼≡」マークをクリックするとメニューが出てきますので、
「不透明マスクを作成」を選んでください。

不透明マスクを作成を選択

この時点では右側がぼけています。

右側がぼけた写真

そこで、透明パネルの「マスクを反転」にチェックを入れます。

マスクを反転にチェック

すると、左側がぼけて馴染みました。

完成した写真

「マスクを反転」にチェックを入れる理由

左側をぼかしたいのであれば、左側を黒にすれば、
いちいち「マスクを反転」にチェックを入れずにすむのではと思われるかもしれません。

左側を黒にしたグラデーション

しかし、これで不透明マスクを作成すると、背景とキレイに馴染まない場合があります。

キレイに馴染んでない写真

これはグラデーションの黒が「グレースケール」のK100%になっているのが理由です。
グレースケールのK100%は若干薄いのできちんとぼかすことができません。

グレースケールのパネル

なので、「グレースケール」を「RGB」に変更して全てを0にすることでも、
キレイに馴染む写真を作成できます。

RGBに変換

上記の方法でも問題は解決するのですが、同じ透明パネルで解決できるので、
「マスクを反転」にチェックを入れる方がお手軽なのでおすすめです。

同じ黒なのにと思いますが、データ上はれっきとした違いがあるのでしょうね。

2014年10月16日(木)
Lightroomを使った写真補正の仕方

Lightroomを使った写真補正の仕方

写真編集ソフトといえば、Adobe社のPhotoshopが有名ですが、
Lightroomという写真の現像ソフトの使い方について、簡単ですがご紹介します。

こちらのLightroomも、Adobe社から発売されているソフトで、
Photoshopが画像加工に秀でているとすれば、LightroomはPhotoshopとは少し違い、
写真編集(現像)に特化しているソフトです。

今回は、このLightroomを使った写真補正の仕方を簡単にご説明します。

まず、こちらが補正前の写真です。
補正前の写真
色が全体的に暗く、女性の肌色もあまり良くないように見えるのですが、
明るさと色調整をするだけでだいぶ変わります。


1.色温度を上げる


まずはじめに、「基本補正」パネルの「色温度」を上げて全体的にオレンジっぽくし
女性の顔色を鮮やかにしていきます。
色温度をあげます
色温度をあげます
これだけでも少し変わってきたと思います。

2.輝度を上げる

写真のノイズが少し気になったので、「ディティール」パネルの「ノイズ軽減」の項目の 「輝度」のスライダを少し上げます。 輝度を上げます 輝度を上げます ノイズが軽減され、全体的に少し滑らかになりました。

3.露光量を上げる

「基本補正」パネルの「露光量」を上げて、明るさを調整します。 露光量を上げます 露光量を上げます 全体的に明るくなりました。

4.色ごとの彩度を上げる

全体的に明るくなりいい感じになってきましたが、まだ少し顔色がよくないかなあと思ったので、 「HSL」パネルの「彩度」の項目で、オレンジとイエローの彩度を上げました。 彩度を上げます 彩度を上げます これで、着物や帯の色は変更されず、肌や背景のみの色合いを変えることが出来ました。

あとは全体的な彩度の調整などをして、完成です。
補正後の写真

普段写真編集に使うソフトといえばPhotoshopが主流ですが、Lightroomを使うことによって
直感的に写真の編集ができます。
最初は難しいかもしれませんが、試行錯誤して、思い通りの写真加工ができるようになるので
是非試してみてください!

2014年10月15日(水)
CSSが利かない時に見直すポイント

最近自分でコーディングしたり新人さんのコードをチェックしたりする中で、
「CSSを設定したはずなのに利かない...どうして...」という事があるので、
その中で特によく陥る失敗点や注意点などをまとめました。

1.CSSの先頭に付ける「#」と「.」の違いを理解する

CSSで失敗するポイント1 最初によく陥る失敗の1つに、CSS側でid名やclass名がしっかり設定できていないという事がよくあります。

class名に対してスタイルを設定したいのに先頭に「.」が無い、
id名に対してスタイルを設定したいのに先頭が「#」ではなく「.」になってしまっている...など。

CSSではid名の先頭は「#」、class名の先頭は「.」で開始するという事を
しっかりおさえておくのがポイントです。
CSSを始めたばかりの方が特によく陥る失敗のようですので、おかしいな?
と思ったらチェックしてみるのがお勧めです。

2.id名やclass名を正しく付ける

CSSで先頭の「#」「.」の使い分けが正しいにも関わらずCSSが利かない場合は、
htmlでid名やclass名の指定が正しくできているか確認してみます。

例えば以下のように
divに対してclassを2重に設定していたり
CSSで失敗するポイント2
class名を複数設定した時に、全角スペースや2つ以上の半角スペースが入っていたり
CSSで失敗するポイント3
閉じタグ「"」が不足していたりしますと
CSSで失敗するポイント4
ちょっとした事でCSSが利かない、もしくはページが崩れてしまう原因になってしまいます。

正しくclass名が設定されたhtmlの例はこちら 正しくclassが設定されたhtmlの例
また、html側とCSS側でid名class名のつづりが1文字違うだけでもCSSが利かなくなるので注意が必要です。

id名とclass名の使い分けと正しい設定方法をマスターして、快適なコーディングを!

2014年10月14日(火)
アピアランスについて考えてみました

最近、先輩にアピランスを活用してデザインする事を教えてもらいました。

しかし、なかなか自分の思っているようにいかないのです。

そこで今回私なりに色々情報を見てちょっと面白いと思ったことを書いてみます。



まずはこちらの文字

大分のロゴ



アピアランスのパネルは以下のようになっています。

アピアランスパネル

文字の塗りを「無し」にした後に
アピアランスの塗りを追加し、その下に2色の線を幅を変えて追加しました。
上に書いてある者から順にオブジェクトが重なっているわけですね。


また、アピアランスパネルの中で効果をかけることが出来るのですが
文字に先程と同じような塗りと線を加えた後
その下にもう一つ塗りを黒出追加しました。
その黒の塗りを効果→形状に変換→長方形にしました。
そしてさらに「角を丸くする」も適用させました。
ooitacityのロゴ

アピアランスパネルはこのような感じです。
アピアランスパネル

アピアランスパネルで効果を付け加えると
中の文字を打ち変えて文字数が変わっても
自動的に黒い四角は大きさを変えてくれるのです!

アピアランスは使い方次第で作業が本当に簡単になるようです。
まだまだ初歩の段階の話ですがまたしっかりと勉強したいと思います!

2014年10月14日(火)
合成フォントの使い方について

デザインをしている時に、漢字やかなはAという書体を使いたいけど、
アルファベットや半角数字はBという書体を使いたいという場合、
一つひとつ書体を選んで変えていくのは結構面倒です。

そんな時に便利なのが、「合成フォント」
合成フォントとは読んで字のごとく
ある書体とある書体を合成して作るフォントのことです。

特別なソフトなどを使わずに
イラストレーター上で作ることができます。

gouseifont.jpg
このようにアルファベットのみ別の書体にすることが可能です。

では合成フォントの作り方に入ります。

メニューの「書式」の中の「合成フォント」を選択します。

menu.jpg

すると、合成フォントの設定画面が開きますので、右側の「新規」のボタンを押してください。

sinki.jpg

任意の名前を付けてOKを押してください。
(「元とするセット」は最初に作る場合は「なし」にしてください)
name.jpg

次に書体を変えたい文字の種類(今回は半角欧文と半角数字)を選択します。
そして実際に書体を変えるのは下のリストで変更します。

settei.jpg

右側の「保存」を押して「OK」で合成フォントの作成は終わりです。

余談ではありますが、
基本的に欧文フォントは和文フォントに比べて同じサイズでも一回り小さくなっています。
なので、そのまま同じ大きさで合成フォントを作っても欧文が一回り小さく見えてしまいます。
そこで、合成フォントを作る際にサイズを少し大きくすることで
同じくらいの大きさに見えるようにすることができます。
サイズを変えると欧文が少し上がって見えるので、ベースラインも若干調整したほうが
キレイに見えます。

size.jpg

ここでは半角欧文と半角数字のサイズを118%にベースラインを-5%に変更しました。
henkouafter.jpg
今回は半角欧文と半角数字のみ書体を変更しましたが、
一覧にあるように「漢字」「かな」「全角約物」「全角記号」「半角欧文」「半角数字」ごとに
書体を変更することができます。
(全角約物は句読点やカッコ類、全角記号は全角数字や全角アルファベットや
その他の記号類)

それぞれ書体やサイズ、ベースラインなどを変更できますので、
例えば、「かな」だけ小さくしたいという場合も
いちいち「かな」だけ選んでサイズを小さくしていくことなく、
文字を入力するだけで小さくすることができます。

作る時はちょっと手間がかかりますが、
一度作ってしまえば、作業の効率がグンとあがると思います。
しかも単体のフォントより別の書体と組み合わせることで、
デザイン的にキレイに見せることも可能です。

色々と試してみながら、自分なりによい組み合わせを模索していこうと思います。

2014年10月10日(金)
重ね技で写真の風情をアップ

今回は、少々手荒で強引ではありますが、その分微調整もしやすい写真の見せ方をご紹介します。
もっと簡単なやり方はあると思いますが、いや絶対ありますが、試行錯誤の末なんだかうまくいったので紹介します!

まずは、この何の変哲もない木の写真。
これでもじゅうぶん風情はあると思うのですがもっとこう、日本らしさと繊細な感じと、
重みを出したく今回は加工してみました。
木01.jpg
Photoshopにてコントラストを強め、影も調整し・・・と、よくある普通の調整をしましたがなんか近づかず。

もっともっと、左右の2本の木を前に出したかったので、左右の木をとてもとても大雑把に
ぼかしながら切り取り、うまく馴染むよう透明度を調整しながら
不透明度を下げガウスで大胆にぼかした同じ画像の上に配置してみました。
木の組み合わせ.jpg

どうなることかと思いましたが、同じ画像に重ねることで、「大雑把さ」が見事に埋もれてしまうようです。
重ねた後、黒い背景を下に敷くことでもっと手前の木を際立たせ、光を表現できます。
私はこれに、Illustratorで薄くオーバーレイをかけ更に光をプラスしました。
出来た画像がこれです!
木02.jpg
単体で大きくどーんと使用するにはちょっと遠近の不自然さが先行しますが、
上に何かメインのものを持ってくる、背景とかならじゅうぶんに使えると思います。

これからも試行錯誤を重ね、失敗ももちろんしますが
先代の教えだけに頼らず色々なものを編み出して行きたいと思います。

今週もお疲れ様でした。これからも頑張ります!

2014年10月 9日(木)
cssで使い勝手の良いデザインへ

今までデザイン関係のご紹介は主にIllustratorやPhotoshopを舞台としておりましたが、
今回はcssを用いて、余白の調整をして見やすく、使いやすいデザインにした例をご紹介します。

知っている方は知っている、弊社の「SEO会員サイト」です。おかげ様で毎日大盛況。
しかしなんだか文字間が詰まっていて、
「使えなくはないけど、なんだかどうも使いにくいデザイン」になってしまっていました。
z3.jpg

最初は、このように縦に並べようと思ったのですが、
z4.jpg

なんだか間延びしたような感じになってしまい、ちょっとスカスカな印象に。
やはり一覧ですっきり見たいですよね。

そして試行錯誤の末、出来たものがこれです!
日付も見やすい、タイトルも見やすい、クリックもしやすい!
クリックがしやすいということは、クリックを更に集めることに繋がります。
z1.jpg

左右で比較すると一目瞭然で、左が変更後、右が変更前です。
z2.jpg

見やすくなったのと同時に、なんだか「イマドキ」な印象も受けませんでしょうか。
ただ情報を並べただけのデザインと、使い手の立場に立ったデザインでは印象も変わってきますね。

作ったデザインが
「使えなくはないけど、なんだか使いにくいデザイン」になってはいないでしょうか??
特別な知識がなくても、Illustratorなどのデザインソフトがなくてもcssで結構調整ができますので、是非お試しください。

2014年10月 9日(木)
ヘテムルのMovableTypeで記事を保存すると403エラーに

昨日遂に、長年やりたいやりたいと思ってできなかった
弊社ホームページのリニューアルが実現しました。
左メニューのブログの最新記事の表示がかっこよくなり、
投稿画像が表示されるようになったので、ブログの画像選びに緊張が走ります。


あまり見栄えのいい画像が期待できない記事内容ですが、
弊社で使用しているヘテムルでのMTのエラーについて。


先日新しくヘテムルに移動したお客様のMTで記事を保存すると、403エラーになるとご連絡。
私の方で試しに投稿してみたところ、正常に投稿できたので、
どんな記事を投稿しているか聞いてみたところ、どうもSNSボタンが問題のよう・・・・


SNSボタンを挿入するのに、MTモジュールが何か必要だったか??
内かどこかに必要な記述が足りないのか??


ただ、SNSボタンが表示されないだけでなく、
403エラーになるというのはさすがにおかしい。


ということで調べていったところ、対処方法がわかりました。


ヘテムル(ロリポップも同様のようです)では、
ドメインごとにWAFというのを設定できるようになっており、
これをONにすることで、外部からの不正アクセス・攻撃をブロックできるようになっています。
これがONになっていると、MTでSNSボタンなどのスクリプトが含まれるコード、
相対パスでrootより上のファイルの記述をした時に403エラーになってしまうようです。


これはMovableTypeだけでなく、WordPressなどのCMSでも同様で、
これを.htaccessで制御して解決する方法もネット上にありましたが、
実際にはあまり正常に反映されにくいようで、結局は
WAFの設定をOFFにするというのが間違いないようです。


WAFの設定はコントロールパネルのWAF設定よりドメインごとに設定することができます。

WAFの設定

設定後、数分で設定が反映されます。

2014年10月 6日(月)
文字詰めについて

ホームページでとても大事な要素となるのが文字です。
もちろん文字の大きな役割は「読む」ことですが、デザインの大事な要素でもあります。
あまり気にかけられていないかもしれませんが、ホームページ上にたくさんあるからこそ、
文字を美しく組めたら全体がきゅっと引き締まって見えたりします。

例えばこちらの「お問い合わせフォーム」ですが
1006blog-01.jpg
「お」と「問」の間はすごく狭く、「フ」と「ォ」の間は広くバランスが悪く見えませんか?
そこで、文字の設定を次のように変更します
moji-01-01-01.jpg
すると...
1006blog-03.jpg
どうでしょうか?
文字と文字の間が調節されて、バランスがよくなったと思いませんか?

上の文字パネルので、青く囲った部分をの数字を変更すると、文字と文字それぞれの間を広げたり狭めたり
することが出来ます。
一つづつ調節したいときは、Altキーを押しながら矢印の左右のキーを押すと個別に調節が可能です。

文字をキレイに組めるとそれだけで画面が引き締まってスッキリして見えるように思います。
細かいことですが、良いデザインはそういう小さな部分から学んで行くものだと感じます。
日常にあふれている文字を、少しデザイン的な目で気をつけて見てみると、いろんな気付きがあって
おもしろいかもしれません。

2014年10月 5日(日)
別データのスウォッチを読み込む方法(Illustrator)

みなさんは、別のデータで使っているスウォッチ(色、グラデーション、パターン)を違うファイルに持ってくる場合どうされますか?

適当に四角を書いて、スウォッチを適用させてその四角をコピー&ペーストで別ファイルに持ってくる。
この方法でもよいのですが、大量にスウォッチを持ってきたい時には不便です。

paneru01.jpg

こういう時に便利なのが、「スウォッチライブラリをIllustratorとして保存」です。

やり方は簡単です。
まず、書き出したいスウォッチパネルの右上の「▼≡」このようなマークをクリックすると
下のようにメニューがでてきますので、「スウォッチライブラリをIllustratorとして保存」を選びます。

ファイルに書き出し

すると保存の画面になりますので、任意のファイル名を付けて保存場所は変えずに保存してください。

保存ダイアログ

次に読み込みたいデータの「スウォッチパネル」の「▼≡」マークをクリックして、
「スウォッチライブラリを開く」→「ユーザー定義」→「(保存時のファイル名)」と選択していきます。

ライブラリの読み込み

するとスウォッチライブラリとして別データのスウォッチを読み込むことができます。

読み込んだスウォッチライブラリ

スウォッチライブラリなのでIllustratorを終了すると再度ファイルを開いた時にはもう一度「スウォッチライブラリを開く」...の
一連の操作をする必要が出てきますので、追加したいスウォッチを選択してから「スウォッチライブラリパネル」の
「▼≡」マークをクリックして、「スウォッチに追加」をすると、スウォッチパネルに追加されます。

スウォッチの追加

別のパソコンに読み込みたい場合は、書き出したファイルをパソコンにコピーして
「スウォッチライブラリを開く」→「その他のライブラリ」でコピーしたファイルを選択すればOKです。

2014年10月 2日(木)
簡単にできる和風のデザイン

和風のホームページやチラシを作りたい時に、Illustratorで簡単にできる和風デザインの作り方を簡単にご紹介します。

まず和紙っぽい図形の作り方からご紹介します。
1.図形を作ります。
2014100201.jpg
2.「効果」→「スタイライズ」→「落書き」を選択します。
「落書き」を選択します
3.和紙独特の感じが出るように調整し、「OK」を押します。
個人的に「間隔」と「変位」の数値が小さいほうが繊細な感じが出ていいと思います。
調整をします
4.和紙テクスチャを重ねてみたり、線を鉛筆にしてみたりしますと和紙の柔らかい感じが出ると思います!
テクスチャを重ねると和紙っぽくなります

少し見づらいですが、作成例です。
お茶という日本的なサイトですが、ポップな文字と共にさりげない和風っぽさが目を惹くと思います。
作成例です

また、和風なサイトにぴったりなフォントをご紹介します。
「うつくし明朝体」と「はんなり明朝」です。
「うつくし明朝体」は平仮名のラインが丸く「はんなり明朝」は細いながらも優雅な線運びがとても素敵なフォントです。
和風フォント
どちらも無料でダウンロードできますので、是非使用してみてはいかがでしょうか。

2014年10月 1日(水)
.htaccessで500エラー

お客様より.htaccessを変更したところ、
cgiが動かなくなってしまったとのご連絡。

まずは新たに追加されたコードを消して元に戻るか確認したところ、
cgiだけでなく、トップページすら500エラーに・・・・

コードを再度見直しても間違いはなかったので、
これは文字コードか改行コードの問題だと思い、確認。
やっぱり改行コードが見慣れないCRに。
CR+LFに戻したところ、正常に表示されるようになりました。

kaigyo.jpg

お客様の方でメモ帳か何かで編集をして、改行コードが
おかしくなってしまったのかもしれません。

たまに出てくる文字コード・改行コードや
FTPのアスキーモード・バイナリーモードの問題。
少し前にはcgiのBOMでもちょっと手こずりました。

フォームのcgiで500エラーが出て、cgiの記述ミスかと思い、
コードを見直したりしましたが、結局BOMありになっていたのが原因でした。

BOMあり

UTF-8の場合にはBOMのある無しの設定があり、
スクリプトによってはBOMありでも動きますが、
Fで普段使っているcgiはBOMありでは500エラーになります。
ちなみにメモ帳ではBOMありでしか保存ができないため、
メモ帳では使ってはいけないようです。やっぱり秀丸が一番!

まだまだ深いところまでは理解ができていませんが、
いろいろと問題に遭遇してきて、エラーに対してだいぶ予測が
つけれるようになったと思います。
問題に対してより的確に対処できるように、また、それを他のスタッフとも
共有していけるように、がんばっていきたいと思います。

2014年10月 1日(水)
テーブルタグの行の考え方について

htmlのテーブルタグについて、分かっているようで
いざ説明しようとしたらあれ...?となってしまった事があり、
もしかしたら同じような事を疑問に思っている方が
いらっしゃるのではないかと思いまとめてみました。

市販のホームページ作成ソフトでは「表を挿入」という便利な機能があって、
行数や列数を指定したら自動的にテーブルタグを生成してくれますが、
だからこそコードの1つ1つの意味を知らずに使い続ける事もしばしば。

今回はソフトで「3行、2列」という指定でテーブルを作りました。
20141001_01.gif
<th></th>は見出し用のセルで項目名などを入れ、
<td></td>は見出し(項目名)に対するデータや内容を入れます。

それでは、余った<tr></tr>は何を指しているのでしょうか。
<th>と<td>は1つのセルを表すのに対し、
<tr></tr>は1行を表しています。

上記では「会社名」と「テスト株式会社」の2つが1行に収まっているので、
コードでは<tr></tr>の中に<th></th>となっています。

そして、以下のように<tr></tr>内に<td></td>が多い程
テーブルの列が増える事になります。
列数が多いテーブルタグのサンプル

応用として、セルを結合するコードを使い、上の1行目は1列、
2行目は2列以上...というテーブルを作ることもできます。
セルを結合して作ったテーブルのサンプル
こちらの例の場合、下に5列あるので1行目には「セルを5つ結合する」
という意味で「colspan="5"」と入れています。

結合するセルの数の指定が間違っていると以下のように
おかしな見た目のテーブルが完成してしまいます。
結合するセルの数を間違えたテーブルのサンプル

また、「colspan="5"」のように結合するセルの数を指定したとしても
<tr></tr>が正しく入っていないと認識されないので注意が必要です。
trが足りないテーブルのサンプル

テーブルタグは苦手...という方も「tr」=行であると覚えていますと
段々慣れてくると思いますので、是非お試しください。

簡単無料お見積もり

お問合せ内容
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • 無理なく持続する経営がしたい
  • 現状を維持しながら息の長い経営をしたい
  • リスクを回避するための線引きをしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
  • 5~10万で自分でテンプレート形式で作る方法に興味がある
内容