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

2015年7月29日(水)
キーワードの探し方

ホームページ制作の上で重要なことは、アクセス数アップ、成約率アップにつながるキーワードを探すことです。
本来はgoogleアナリティクスやアクセス解析などを設置し、訪問者の傾向を観察しながら見つけ出すのがよいかと思います。
しかし、そういうのがなかった場合どうするか。
ここでは、キーワードを探すうえで役に立ちそうなものをご紹介します。

Googleアドワーズの「キーワードプランナー」
keywordplanner.png
Googleアドワーズの運用ツールキーワードプランナーを選択。
様々な探し方がありますが、ここでは
新しいキーワードを見つけるフレーズ、ウェブサイト、カテゴリを使用して新しいキーワードを検索
を紹介します。
キーワードだけでなく、サイトのアドレスとの組み合わせで探してくれます。
基本的にかなり「手堅い」結果を返す傾向があります。

グーグルサジェストキーワード取得
googlesuggest.png
検索窓に単語をひとつ入力したら組み合わせで使えるキーワードが出力されます。
基本的に総当たりで広く浅い結果を返す傾向があります。

双方特徴がありますので、あくまで「候補」を探し、そこからは諸般の要素を考えて絞り込んでいくのがよいと思います。

2015年7月28日(火)
イラストレーターで光沢のあるグラデーションをつくる

グラデーション部分をツヤッと光沢のある感じにひと手間加えてみます。
5色2.PNG
2色で作っていたグラデーションに
5色6.PNG
グラデーションのバーをクリックしてグラデーションにする色を3~4色にします。
濃い色と薄い色の同系色を交互に置くようにすると
5色3.PNG
5色4.PNG
ツヤッとした光沢のあるグラデーションになりました。
5色.PNG


ちょっとした変化も付いて簡単に出来るのでおすすめです。
是非お試し下さい!

2015年7月27日(月)
細かい毛を簡単に切り抜く

今日はPhotoshopを使って、細かな毛を簡単に切り抜いていきたいと思います。
短い時間であっという間に切り抜けるので時短にもなるしすごく便利です。

まずは写真を用意します。

細かい毛を簡単に切り抜く1.jpg

Photoshopの【クイック選択ツール】を選択。
細かい毛を簡単に切り抜く2.jpg

大まかに形を選択していきます。
(細かい部分はあまり考えずにで大丈夫です)
細かい毛を簡単に切り抜く3.jpg

選択が終わったら、【マスク】ツールを選択。
右上の四角に+マークが入っているアイコンを選択しマスクを選択します。
細かい毛を簡単に切り抜く4.jpg
そして「調整」の【マスクの境界線】をクリックするとこのような画面になるので左の筆アイコンをクリック。
細かい毛を簡単に切り抜く5.jpg
すると縁が表示されますので細かく調整していきます。
細かい毛を簡単に切り抜く6.jpg
調整がおわったら数値の調整をしていきます。
細かい毛を簡単に切り抜く7.jpg
出来たら完成です!!
細かい毛を簡単に切り抜く8.jpg

かんたんでしかも早くきれいに切り取れますのでぜひおすすめです♫おためしください!

2015年7月24日(金)
Photoshopで一度に大量の画像に同じ効果をかける方法

大量の画像に同じ処理を掛けたいというときに便利な方法があります!
Photoshopのバッチ機能を使います。
アクションタブ
まず、「ウィンドウ」タブの「アクション」をクリックします。
アクションウィンドウ
すると、アクションウィンドウが開かれます。
次に右下の「新規アクションを作成」をクリックします。
アクション名
わかりやすいアクション名を入力し、OKをクリックします。
録画開始
この状態で行った動作を記憶し、一度に同じ動作を掛けることができます。
今回は、画像を明るくしたいので、トーンカーブをかけます。
トーンカーブ
トーンカーブをかけた後、左下の□のボタンを押します。
これで今の動作を記憶しました。
バッチ"
一度、開いているウインドウを消し、「ファイル」から「自動処理」→「バッチ」を選択します。
バッチウインドウ
「アクション」に先程作成したアクション名を選択します。
あとは、補正したい画像を選択し、出力先を選択して出来上がりです!

2015年7月22日(水)
Lightroomのブラシ機能を使いこなす

Lightroomのブラシ機能をご紹介します。
ブラシ機能を使えば、ある箇所だけを補正することができます。
とても便利な機能です。

Lightroomでブラシ機能を使うその1

補正したい画像をLightroomで読み込みます。
そして、ブラシ機能をアクティブにするショートカットキーKを押してください。
これで、ブラシ機能が有効になりました。

Lightroomでブラシ機能を使うその2

ブラシで補正したい箇所を塗っていきます。
Oを押すとどこが有効になっているか赤色で表示してくれます。
確認しながら範囲を選択していきましょう。

Lightroomでブラシ機能を使うその3

露光量を少し上げて、明瞭度と彩度を下げることで、
ご飯の色である白っぽい感じになりました。


特定の箇所だけを補正したいときなどは、
Lightroomのブラシ機能は必須ですね!


ぜひ使ってみてください。

2015年7月21日(火)
メールフォームで自動返信メールの項目の表示を変える方法

ホームページからお問い合わせがあった時、
またはメールの送信者に届く自動返信メールの内容で項目の表示がデフォルトで

[お名前]ホームページ制作F
[住所]大分県大分市○○
[電話番号]000-0000-0000
となっている部分を
お名前 = ホームページ制作F
住所 = 大分県大分市○○
電話番号 = 000-0000-0000
と変更する方法をご紹介いたします。

まず、メールフォームのファイル内にあるconfig.cgiを開きます。
表示調整 単一行表示 と 表示調整 複数行表示と書いてある部分を見つけます。
before.png
$config{'singleline'} = " [ %s ] %s\n";
$config{'multiline'} = " [ %s ] = \n%s\n\n"; の[ %s ]を、%s = に書き換えます。
after.png
アップロードし、返信メールで表示が変更されていたら完了です。

2015年7月21日(火)
さりげなくアイコンを使う

パソコンにはもちろん、スマホサイトには特に、アイコンをよく使いますよね。
アイコンが目立ちすぎて、肝心な文字が埋もれてしまうという時は
透明度を変更して背景となじませたら良いです。

白いアイコン

↑ただ白くしただけでは、ちょっと主張が強いように思えます。


影
↑影を付けてみました。少しへこんで見えます。


オーバーレイ
↑透明度をオーバーレイの100%に変更すると、文字と差別化ができて見やすくなります。

せっかく見やすいように付けるアイコンが文字の邪魔をしてしまってはもったいないので、
時と場合によって編集することをおすすめします。

2015年7月16日(木)
イラストレーターでテクスチャにアンティークな雰囲気を出す方法

柔らかい雰囲気を出したい時など、よくテクスチャを使用します
0716_0.jpg
たとえばこのテクスチャも、これだけで結構雰囲気は出るのですが、
もうちょっと雰囲気を足したいなというときに出来る、簡単な加工をご紹介します。

まずは、ブラシツールで上の方に係るように適当に線を引きます。
その際、ブラシライブラリから「アート_水彩」を開き、濃い目のブラシを選びます。
後で線の形や位置、ブラシの種類も変更できるのでどれでもかまいません。
0716_2.jpg

レイヤーモードを乗算にし、ピアランスで、引いた線の効果に「ぼかし」を入れます。
今回は数値を30にしましたが、適宜いい感じになるよう調整してください。
0716_5.jpg

下地に収まる部分でクリッピングマスクをかけます。
0716_3.jpg

シミのような、古ぼけた雰囲気がプラスされました!

0716_4.jpg

ブラシの種類や色、濃さなどはいろいろ試してみるとまた違った雰囲気が出てくると思います。
是非試してみてくださいね。

2015年7月15日(水)
入力フォーム、select項目のグループ化

入力フォームで複数の項目から一つ選んでもらう場合、selectが有効です。
しかし、あまりにも選択する項目の数が多い場合、単純に探しにくくなってしまいます。

要はこんな感じでグループ分けができてるとよいわけです。
select-group.png

基本的にはoption valueをひたすらならべて選択項目を作っていきますが、
グループにしたい項目の前後を optgroupで囲んであげます。
labelには、グループ名を入力します。
optgroupsample.png
選択項目が多い時に、親切で便利な方法です。

2015年7月14日(火)
イラストレーターでオブジェクトのみを拡大・縮小する方法

イラストレーターで複数あるオブジェクト同士の間隔を変えずにオブジェクトのみを拡大・縮小する方法を紹介します。
まず等間隔に並べたオブジェクトを用意します。オブジェクトは全て選択した状態にしておきます。
四角.PNG
今回はオブジェクトのみを50%縮小してみます。変形→拡大・縮小から縮小しようとすると、オブジェクト同士の間隔も50%ずつ縮小されてしまい、間隔が詰まってしまいます。
四角2.PNG
そこで変形→個別に変形を選択し、拡大・縮小の垂直方向と平行方向の倍率をそれぞれ50%に設定します。すると
四角3.PNG
オブジェクト同士の間隔は変わらずに、オブジェクトのみが縮小されました。
四角4.PNG
沢山オブジェクトを並べたパターンを拡大・縮小する際などに便利なのではないでしょうか。
是非お試しください!

2015年7月13日(月)
Webページを作るときの各プログラム言語のコメントアウト記法

HTML、CSS、JavaScript ... いろんな言語を使って、Webページを作ることが多いです。
・表示させたくない
・メモとして残したい
そんなときに、コメントアウトをします。

下記に主要な言語毎コメントアウトをまとめました。

HTML

<!-- この範囲内がコメントアウトされます -->
(WordPressの記事でも使えます)

CSS
/* この範囲内がコメントアウトされます */
JavaScript
// この行のみコメントアウトされます
/* この範囲内がコメントアウトされます */
PHP
# この行のみコメントアウトされます
// この行のみコメントアウトされます
/* この範囲内がコメントアウトされます */
Smarty
{* この範囲内がコメントアウトされます *}
(ECCubeの場合)
<!--{* この範囲内がコメントアウトされます *}-->

CGI
# この行のみコメントアウトされます

使いたいプログラム言語を見つけて、ぜひ使って下さい!

2015年7月10日(金)
イラストレーターで別方向からのボカシを同時にかける方法

イラストレーターで写真などを自然にぼかす時、不透明マスクを使用してぼかしますが、
この場合、同じ方向にしかぼかせません。

一方向のぼかし

そこで更に縦方向のグラデーションで不透明マスクを重ねようとすると境目がハッキリ出て
キレイにぼけません。

縦方向のグラデーション追加

ハッキリ別れたぼかし

ぼかした画像を選択すると透明のパネルで画像の部分とグラデーションの部分が
別々になっていることがわかります。

グループ化前のパネル

ということで、ぼかした画像だけを選択して「Ctrl+g」でグループ化しました。
すると、透明パネルの表示が画像のみになりました。

グループ化したパネル

この状態で再び縦方向のグラデーションで不透明マスクをかけると下が隠れてしまいます。

下が消えた状態

最後に、透明パネルの「クリップ」のチェックをはずせば、

透明パネルの「クリップ」のチェックをはずす

右方向へのぼかしと上方向へのぼかしがキレイに馴染みました。

二つの方向にぼかした画像

2015年7月 8日(水)
Illustratorの落書きオプションを使いこなす

文字に深みを出したいときなどに、 Illustratorで落書きオプションをよく使います。
使い方はとても簡単ですので、紹介したいと思います。

1.深みを出したい文字を選択します。

文字に深みを出したい

2.アピアランスから落書きを追加

アピアランスから落書きを追加

3.スタイルを極細にします(オススメ)

落書きオプションのスタイルを極細に

文字はこんな感じになります。
文字はこんな感じになります

4.角の丸みを40へ

角の丸みを40へ設定

文字に味が出ました!
落書きオプションで文字に味が出ました

落書きオプションを使えば、簡単に文字に味を出すことができます。
文字に深みを出したいとき、時代を感じさせたいときなど使ってみてください。

2015年7月 7日(火)
フォームの内容を特定の要素に即反映させる方法

フォームの内容を特定の要素に即反映させる方法をご紹介します。
例えば下の画像のように、住所や郵便番号が同じ場合、再度入力するのは少し面倒ですよね。
screencapture-uri-uri-heteml-jp-kudoh-click-kantanmeishi-html-1436262265170.png
今回はこのオレンジで囲ってる部分を、jQueryを使って即反映させたいと思います。
まずHTMLで反映させたい項目の記述を確認します。
入力欄
screencapture-uri-uri-heteml-jp-kudoh-click-kantanmeishi-html-1436262265171.png

出力欄
screencapture-uri-uri-heteml-jp-kudoh-click-kantanmeishi-html-1436262265172.png
次に、Javascriptに以下のコードを記述します。

$(function(){
    // ファイル読み込み時に、フォームエリアのアクションを設定する
$('#post').bind('blur keydown keyup keypress change',function(){
        changeDestValue();
    });
$('#address').bind('blur keydown keyup keypress change',function(){
        changeDestValue();
    });
$('#tel').bind('blur keydown keyup keypress change',function(){
        changeDestValue();
    });
$('#fax').bind('blur keydown keyup keypress change',function(){
        changeDestValue();
    });
$('#email').bind('blur keydown keyup keypress change',function(){
        changeDestValue();
    });
});
function changeDestValue() {
  var post = $('#post').val();
    // 入力値を設定
    $('#post2').val(post);
var address = $('#address').val();
    // 入力値を設定
    $('#address2').val(address);
var tel = $('#tel').val();
    // 入力値を設定
    $('#tel2').val(tel);
var fax = $('#fax').val();
    // 入力値を設定
    $('#fax2').val(fax);
var email = $('#email').val();
    // 入力値を設定
    $('#email2').val(email);
}

太字になっている部分に入力欄のid名、斜体で下線が引いてある部分に
出力欄のid名を書き込みます。(※id名が被っていると効かないので注意。)
保存し、反映されているか確認します。
screencapture-uri-uri-heteml-jp-kudoh-click-kantanmeishi-html-1436264217441.png
このように出力欄に反映されたら成功です!
このような機能があると、スムーズに入力できて楽ですのでぜひご活用ください。

2015年7月 6日(月)
Photoshopでいらない背景を消す方法

今日はPhotoshopを使って、不要な背景を簡単に消してしまう方法をご紹介します。
紙からスキャンしたデータをそのままペーストするとこのように背景(紙)の部分まで付いてきてしまいます。
文字だけだったら【イメージ】→【色調補正】→【明るさ】で紙の部分を白く飛ばしてしまうやり方もあるのですが、
この方法だと文字の部分の色も飛んでしまうし、レイヤーを使って色を塗るときに少し困ってしまいます。

そこで紹介するのが【色域指定】を使った方法です!
私も最近教えてもらったのですがとっても便利です!さっそくやり方をご説明します。

1.対象のものを準備します。今回はこちらを使います。
Photoshopでいらない背景を消す方法1.jpg

2.【選択範囲】→【色域指定】→消したい背景をクリックして値を調整
Photoshopでいらない背景を消す方法2.jpg

3.範囲が選択されるので消しゴムツールで消す
Photoshopでいらない背景を消す方法3.jpg

これでおわりです!とっても簡単に消すことが出来ました!
差も一目瞭然ですね!

Photoshopでいらない背景を消す方法4.jpg

ぜひ使ってみて下さい!

2015年7月 3日(金)
Illustratorで特徴的な影を付ける

図形を配置してちょっと一工夫がほしいときに便利なのがドロップシャドウという機能です。
非常に使い勝手の良いのですが、使いすぎると単調になるので少し変化を与えた影を作ってみます!
四角形
まず、黒い四角形を描きます。
パス、アンカーポイント追加
四角形を選択し、「オブジェクト」→「パス」→「アンカーポイント」の追加を選択します。
アンカーポイント追加後の四角形
四角形の角と中辺にアンカーポイントが追加されました。
このアンカーポイントを「ダイレクト選択ツール」で一度クリックします。
アンカーポイントをずらす
そのままドラッグか、矢印キーで動かすことができます。
今回は「Shift+→」で10pixelへこませました。
アンカーポイントで全てをずらす
上図のようにそれぞれへこませていきます。
下辺のみ20pixel、あとは10pixelへこませました。
ガウスぼかし
ぼかし、透明度を下げた四角形
あとは、ガウスぼかしをお好みで追加し、透明度を下げ完成です。
今回は、ぼかし30pixelに60%の透明度にしました。
影を付ける前の図形
こんな図形の下に配置するだけで...
影を付ける図形
ちょっと飛び出したような印象が付きます!
簡単にできますので、ぜひお試しください!

2015年7月 1日(水)
複数の背景画像を重ねる方法

ホームページのヘッダ部分です。
bgsetumei01.jpg
ブラウザサイズによってある程度、バランスの良い位置に動きます。
bgsetumei02.jpg
白い部分は背景(cssのbackground-color)、その上に背景(cssのbackground-image)、さらに文字と人物は画像(img src)です。
さらにグローバルメニューの下に影を追加してください、ただしブラウザサイズの変化に追従してください、という場合、どのような対処法があるでしょうか。
部分的にはこのようなイメージです。背景の有無に関係なく表示させます。
bgsetumei03.jpg
ひとつはcssのbox-shadowを使う方法。ただソースが複雑になります。
もうひとつはcssを使い背景画像を複数重ねる方法。こちらを紹介します。

※imageフォルダにshadow.png(メニュー下の影)、bg_header.jpg(壁の背景画像)があると想定。

.てきとうなクラス{
background-image: url(image/shadow.png), url(image/bg_header.jpg);
background-repeat:repeat-x, no-repeat;
background-position:0 0, top center;}


カンマ区切りで記述します。左側に書いたものが前面、右側に書いたものが背面に表示されます。
repeatやpositionといった属性も、左右の順番にしたがいます。
backgroundで全てまとめて書くのはNGなので注意です。

このような記述も可能です。この場合、上に書いたものから前面に表示されます。

.てきとうなクラス{
background-image: url(image/shadow.png);
background-image: url(image/bg_header.jpg);

background-repeat:repeat-x;
background-repeat:no-repeat;

background-position: 0 0;
background-position: top center;}


大変わかりやすくてよい方法なのですが、欠点はIE8だと正常に表示されない点です。
box-shadowもIE8では正常に表示されません。IE8で表示できるようカバーするとソースが複雑になります。
2016年1月にIE8のサポートが切れるので、IE8を使わなくなる流れが加速したら、使える表現方法になると考えています。

簡単無料お見積もり

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