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

2015年6月30日(火)
イラストレーターでレトロな花模様をつくる

花ブログ用.JPG
正円を等間隔に並べたオブジェクトを用意して、選択します。

花ブログ用3.JPG
続いて回転ツールを選択し、オプションキー+Altキーを押しながらオブジェクトの下をクリックすると中心が設定されます。
中心が設定されたら回転のダイヤログボックスが出てきますので角度を入力しコピーにすると
花ブログ4.JPG
このようになります。
花ブログ5.JPG
オブジェクトメニューの「変形」から「変形の繰り返し」を選択し、オブジェクトが一周するまで繰り返していきます。
花ブログ用2.JPG
レトロな花のような模様が出来ました。
是非お試しください!

2015年6月29日(月)
Webページを作るために役立つツール


Webページを作るときに
「あれなんだっけ?」と思って検索することがよくあります。
そしてWebブラウザがいっぱい開かれてうんざりしてしまいます。

そんなときに、便利なサイトを2点ご紹介します。




鬼ツールズ:http://www.oni-tools.com/

osusume_html.png

とにかく細かい設定が便利!
.htaccessの生成、タグ支援、QRコード生成、パスワード生成
日本語文章校正支援、黄金比・白銀比

などなど
あれしたい!が詰まったサイトです。
HTMLをおもに編集している人にお勧めです。




osusume_design.png

Photoshopの豆知識から、お役立ち情報まで
きれいで見やすいサイトになっています。
フリーフォントのまとめなんてうれしいですね。

デザインをおもに編集している人にお勧めです。



どれも一例ですが便利ツールが揃っています。
知りたいことが分からずに迷っている方、
話題を取り入れたい方は
是非試してみてください!

2015年6月26日(金)
イラストレーターで便利なショートカットキー

イラストレーターの作業時間を短縮するために、
ショートカットキーを使えるようになると結構便利です。

今回は、そんな便利なショートカットキーについて、いくつか取り上げてみたいと思います。

【まずは目次】
1.覚えたら便利なツール切り替えショートカットキー
2.一時的に切り替えたいときのショートカットキー
3.オブジェクトを複製したいときに使う
4.選択ツールと文字ツールの切り替え
5.オブジェクトの最背面・最前面へ移動
6.オブジェクトのグループ化と解除
7.ガイドと定規の表示/非表示など
8.操作の取り消しとやり直し
9.文字に関してのショートカットキー


1.覚えたら便利なツール切り替えショートカットキー

[V]選択ツール
[A]ダイレクト選択ツール
[T]文字ツール
[\]線ツール
[M]長方形ツール
[I]スポイトツール

よく使うツールをピックアップしてみました。
これができると少し作業時間を短縮できるかと思います。

イラストレーターのショートカットキー

ショートカットキーの設定を変更することもできます。


2.一時的に切り替えたいときのショートカットキー

スペースキー       ⇒ 手のひらツール
Ctrl+スペースキー    ⇒ 拡大
Ctrl+Alt+スペースキー  ⇒ 縮小

何気に使います。


3.オブジェクトを複製したいときに使う

・Altを押しながら離すと複製される
・Shift+Altを押しながらだと水平・垂直に複製できる

Ctrl+C ⇒ コピー
Ctrl+V ⇒ 貼り付け
Ctrl+F ⇒ 全面に貼り付け
Ctrl+B ⇒ 背面に貼り付け
Ctrl+S ⇒ 同じ位置に貼り付け


4.選択ツールと文字ツールの切り替え

選択ツール⇒文字ダブルクリック⇒Escキー⇒選択ツール

結構よく使います。


5.オブジェクトの最背面・最前面へ移動

Ctrl+Shift+[ ⇒ 最背面へ移動
Ctrl+Shift+] ⇒ 最前面へ移動

最近覚えました。


6.オブジェクトのグループ化と解除

Ctrl+G    ⇒ グループ化
Ctrl+Alt+G ⇒ グループ解除


7.ガイドと定規の表示/非表示など

Ctrl+:    ⇒ ガイド表示/非表示
Ctrl+Alt+: ⇒ ガイドロック/ロック解除
Ctrl+R    ⇒ 定規表示/非表示


8.操作の取り消しとやり直し

Ctrl+Z     ⇒ 取り消し
Ctrl+Shift+Z ⇒ やり直し


9.文字に関してのショートカットキー

Ctrl+Shift+> ⇒ 文字大きく
Ctrl+Shift+< ⇒ 文字小さく
Alt+↑     ⇒ 行間広げる
Alt+↓     ⇒ 行間狭く

文字の間を選択してい状態で
Alt+→     ⇒ カーニング広く
Alt+←     ⇒ カーニング狭く

1つ以上の文字を選択している状態で
Alt+→     ⇒ トラッキング広く
Alt+←     ⇒ トラッキング狭く

alt+Shift+↑ ⇒ ベースライン上げる
alt+Shift+↓ ⇒ ベースライン下げる


以上が、イラストレーターで便利なショートカットキーでした。
まだまだあるんですが、とりあえずよく使うものをピックアップしてみました。
イラストレータの作業時短に一役買ってくれるはずです。


2015年6月25日(木)
SEOにも効果的なコンテンツを魅せる3つのポイント

昔のSEOではとにかく外部リンクを貼りまくる、ページにキーワードを詰め込めば上位表示できた事もありましたが、最近のSEOはお客様にとって役に立つ情報がある、お客様が求めている情報があるウェブサイトがGoogleに評価されるようになりました。

大手のようなきれいなデザインにしなくても、お客様の声、導入事例、そして非営利情報の追加などコンテンツの強化していけば上位表示する可能性は高くなります。
今回はお客様にとっても見やすく、検索エンジンにも評価されやすいコンテンツの作り方をご紹介致します。

1.文章だけでなく見やすいデザインにする

画像や見出しを入れた見やすいトップページ 最近は同じくらいもしくはそれ以上の質やボリュームで情報を提供しているウェブサイトが増えたので、
文章があるだけではページの力も弱くなっています。

そこで、文章が沢山あるページは、画像で見出しテキストを作って強調したいキャッチコピーを目立たせたり、イメージイラストなどを挿入して見ているお客様が楽しくページを読み進められるように工夫する必要があります。ページをしっかり作り込むほど、検索エンジンからも評価されます。


2.1つのページに情報を集約する

「詳細はこちら」をクリックすると詳細ページに移動させる方法を使うとページ数は増えますが、小さいページ(html)を作りリンクしていても、別々のページに移動するのでページの力が分散されてしまいます。
クリックしないですぐに情報が見える状態になっている方が、お客様の目にとまりやすくなります。

また、ページが分散しているとサイトを見ているユーザーが何回もクリックする事になり大変です。

小さいページ(html)を量産するよりも1つのページに文章を入れ込む方がそのページが強化されますので、分散されたページがある場合は1つのページに集約する事をお勧めします
情報を集約したページ作り

3.Googleのパターン認識を活用する

近年のGoogleは「パターン認識」をするようになり、ウェブサイトの文章だけでなく画像も検索順位の判断材料として重要視するようになりました。

例えば「トマト」と検索すればトマトの画像が検索結果に出ますし、「誕生日プレゼント」と検索するとバースデーケーキや包装されたギフトボックスの画像が表示される訳です。

画像だけでなく色についてもGoogleは覚えるので、「バレンタインデー」は赤やピンクのイメージが多く、「ウェディング」では花嫁の白いドレスが沢山出てきます。
Googleの画像検索結果の例
ホームページのデザインやコンテンツ作成においてもキーワードに合ったイメージカラーで作成した方がユーザーが見た時にも分かりやすいので、是非お試しください。
Googleの学習機能を活用したデザイン
このようにちょっとした工夫から始められるSEOがありますので、実践してみてくださいませ。

2015年6月24日(水)
ホームページにgoogleマップを埋め込む

今回は、ホームページにgoogleの地図を埋め込みする方法をご紹介します。

1.googleの地図検索で埋め込みしたい住所を検索

20150624_01.jpg

2.設定から「地図を共有または埋め込む」を選択

検索した画面の右下の「設定」ボタンをクリックし、 「地図を共有または埋め込む」を選択
20150624_02.jpg

3-1. 地図のリンクをする場合

クリックして、googleの地図ページを直接表示させたい場合は
「リンクを共有」のURLをコピーしてリンク先として利用します。
20150624_06.jpg

3-2. 地図の埋め込みをする場合

ホームページ上に地図を埋め込みしたい場合は
「地図を埋め込む」を選択し、ホームページ上の地図を表示したい部分に コードを貼り付けます。

20150624_03.jpg
地図は小・中・大・カスタムサイズが選択可能です。
小 横幅400 縦幅300
中 横幅600 縦幅450
大 横幅800 縦幅600

20150624_04.jpg
カスタムサイズを選択すると、好きな大きさを指定することができますので
予め用意したデザイン枠に地図を埋め込みする場合などはカスタムサイズを利用します。
20150624_05.jpg

2015年6月23日(火)
ファビコンの作り方と設置方法


ファビコン(favicon)とは、ブラウザのアドレスバーやタブに表示されるウェブサイト独自のアイコンのことです。
今回はそのファビコンの作り方と設定方法を説明します。

■ファビコンの作り方
アイコンにする画像を用意します。(32×32)
mushiba.jpg
↓こちらのサイトにアクセスし、アイコン用に変更します。
http://favicon.qfor.info/c/

screencapture-favicon-qfor-info-c-1435121183683.jpg
作成し、ダウンロードしたらFTPにアップロードします。
screen1.jpg


アップロードしたら、<link rel="shortcut icon" href="アイコンを置いた場所/favicon.ico" />を
アイコンを表示したいページの<head>内に記述します。
screen2.jpg

記述したらアップロードし、アイコンが設置されているのを確認したら完了です。
screen3.jpg

簡単に設置できますので、ぜひご活用ください!

2015年6月22日(月)
Illustratorで紙のようにめくれた表現をつくる方法

今回は、ぺらっとめくれたような表現を簡単に作成する方法をご紹介します。

まずは土台のオブジェクトを作成します。今回は円にします。
紙のようにめくれた表現をつくる方法1.jpg

次にはさみツールでめくれる支点となる2か所を選択、切り抜きます。
紙のようにめくれた表現をつくる方法2.jpg
さらに切り抜いた箇所を選択したまま、
「オブジェクト」→「パス」→「連結」でクローズドパスにします。
紙のようにめくれた表現をつくる方法3.jpg
そして、切り抜いたオブジェクトをぐるっと回転させて、ちょうど真正面にくるように配置をし、
裏側の表現の作成のためグラデーションをかけます。
数値はお好みで調節してください。
紙のようにめくれた表現をつくる方法4.jpg
このようになりました。
紙のようにめくれた表現をつくる方法5.jpg
さらにリアリティーをだすために、ドロップシャドウを使います。
(「効果」→「スタライズ」→「ドロップシャドウ」)今回は土台の色が赤なので影は暗い赤色に設定しています。
紙のようにめくれた表現をつくる方法6.jpg
これで完成です!
紙のようにめくれた表現をつくる方法7.jpg

とても簡単にちょっと凝った表現ができるのでおすすめです!ぜひ活用してみて下さい♪

2015年6月18日(木)
シンプルなグラデーションのバリエーションについて

今回はシンプルな白とグレーでのグラデーションの
作り方をご紹介します。
まずはもっともスタンダードな形はこれでしょうか。
ドロップシャドウをかけてボタンっぽくしています。
スライダーはちょうど真ん中くらいで、柔らかくカーブしている立体感がでます。
0618_1.jpg

二つ目は、スライダーの色の位置だけ動かしています。
二つとも真ん中に寄せることで、中間色の部分がほぼなくなり、
シャープなイメージのボタンになります。
0618_2.jpg

3つ目は色のスライダーを一つ足しました。
Altキーを押しながらスライダーを動かすと、
コピーされて同じ色のスライダーを追加することができます。
中央部分に光が当たっているようなボタンになりました。
0618_3.jpg

こちらは上のものと色を反対にしました。
こうすると使っている色は同じですが、
光の当たり方が変わって見えてマットな感じに見えます。
0618_4.jpg

最後は、一番最初のグラデーションの色の上下を逆にして、
効果をドロップシャドウから光彩(内側)に変更しました。
地の部分からへこんでいるように見えます。
0618_5.jpg

簡単なグラデーションでも少し変えてみると
様々な立体感や効果を出すことができます。
これだけでもデザインの雰囲気が変わってきますので、
ぜひ色々と試してみてください!

2015年6月17日(水)
レスポンシブデザインの文章で改行するときの便利技

まずこれをご覧ください。
同じページですが、左がパソコン、右がスマホを使って閲覧したときの見え方です。
kaigyo01.png
左はブログでよく使われる一行アケの文章ですが、右はスマホで使われる4~8行で1段落にまとめた文章です。

要はブラウザ幅が狭くなったとき、不要な改行タグを消せばよいわけです。
そのためには、cssでまずブラウザ幅切り替えの基準を作成します。
そして下記のようなクラスをつくります。


@media screen and (min-width:701px){}/*パソコン用*/
@media screen and (max-width:700px){.pcwatch{display: none !important;}}/*スマホ用*/

クラス:pcwatchはスマホ用の幅になったら、最優先でそのタグを表示しない、という意味です。
これを使い、二種類の改行コードを作ります。ひとつは「どんな状況でも改行」、もうひとつは「パソコンのみ改行、スマホでは改行しない」です。

<br> <br class="pcwatch">

このふたつを使い分けると、文章の改行を制御できます。

2015年6月16日(火)
テキストボックスの端に表示される小さなプラスのマーク

文字がテキストボックス内に収まらなかった場合このようにボックスの下方の端に小さなプラスのマーク(+)が出ます。
テキスト4.JPG
文字の大きさやテキストボックスの大きさを変更する事でも解消できますがプラスのマーク(+)をクリックするとテキストボックス内に収まらなかった続きの文章が表示されます。
表示された続きの文章は単独のテキストボックスとして扱えるようになります。
テキスト2.JPG
一例ですがこのように文章を並べて段組みをした文章として見せることもできます。
テキスト5.JPG
是非お試しください!

2015年6月15日(月)
Windows Liveメール送信時のCCアドレスを、自動的に入力する

会社でメールを送るときに、
CCアドレスに、いつも会社共有メールアドレスを入れておきたい
BCCアドレスに、いつも自分のメールアドレスを入れておきたい
でも忙しいとき、つい忘れちゃう。

そんな時、Windows Liveメール送信時、自動で入力する方法を紹介します!
フリーソフト「WLBcc」を使います。


下記URLから、ダウンロードして、インストールするだけです。

ベクターからWBccをインストールします


ダウンロードが終わったら、
zipファイルを解凍して、exeファイルをダブルクリックしてウィザードに従うだけでインストール完了です。
WLBccをダウンロード後解凍しました.png


インストールが終わったらいよいよ設定です!
下のメニューバーにアイコンが表示されます。
タスクバーに表示されます

このアイコンをクリックして起動します。
すると設定画面が表示されるので、下記を設定し[適用]ボタンを押下してください。
・「設定したいメールアカウント」を選択
・挿入したい「CCアドレス」または「BCCアドレス」を記載(片方のみでもOKです)
入力が終われば、設定は完了です!

WLBccの設定画面です


では、WindowsLiveメールを起動して、電子メールメッセージを作成してみましょう!
メッセージを作ってみます

これで、毎回手入力を行わなくてもよくなりました!
ぜひ、お試しください。

2015年6月12日(金)
Illustratorで図形の大きさを変えると線の幅も一緒に変わってしまう

Illustratorで図形の大きさを変える時に線の幅も一緒に変わってしまうということがありました。
変更前の図形_1-03.jpg
この図形を少し小さくしてみます。
変更後の図形
そうすると、線の幅も一緒に小さくなってしまいます。
何が原因なのかなと先輩に聞くとすぐに教えてくれました!
拡大・縮小ツールの位置
「拡大・縮小ツール」をダブルクリックします。
150612_4-05.jpg
「線幅と効果も拡大・縮小」という項目にチェックが入っていました。
このチェックをはずし、無事解決です!

2015年6月11日(木)
ホームページで好きなマークで箇条書きする方法

箇条書きでは<ul>や<ol>などのリスト機能を利用するかと思いますが
CSSで指定できるリストのマーカーの種類は限られています。

【CSSで指定可能なマークの例 list-style-type】
●黒丸 disc
○白丸 circle
■四角 square 


注意書きなど※マークで箇条書きをしたい場合は
padding-left: 1em; text-indent: -1em; の2つを指定する方法が便利です。

【記述例】
<p style="text-indent:-1em; padding-left:1em">
※あいうえお<br />
かきくけこ</p>


↓ 下記のような表示になります

※あいうえお
かきくけこ

textindent.png text-indentは、段落の始めを1字下げるためによく利用しますが、マイナスの指定も可能です。

padding-left: 1em;と同時に指定することで
簡単に改行に対応した箇条書きができますのでぜひお試しください!

2015年6月10日(水)
Photoshopで服の色を変えてみる

デザインに写真を置いた時、周りのデザインと合わなくて
変に目立ちすぎてしまう、またはデザインに埋もれてしまうということがあると思います。

簡単な服の色の変え方を紹介します!

色を変更する前の元写真
↑元となる写真を準備します。

色相
↑色を変更したい範囲を選択して、イメージ>色調補正>色相・彩度のウィンドウを出します。

色相の値を変更すると、色が変わっていきます!
ピンクに変更
↑ピンクになったり

黄色に変更
↑黄色になったり!

濃い水色に変更
↑また、彩度を上げると元の濃さから濃くすることができます。色々な再現が可能です。

やりすぎれば不自然になりますが、ちょっとの工夫でデザインに効果的に使用できると思いますので、
是非試してみてください!

2015年6月 8日(月)
イラストレーターでクリッピングマスクを解除せずに別の図を同じパスで切り抜く方法

イラストレーターで複数のオブジェクトを一度にクリッピングマスクでトリミングした時に、
さらにオブジェクトを追加して切り抜きたい場合、
一度クリッピングマスクを解除してオブジェクトを追加して
再度トリミングすると切り抜き用のパスを見つけるのも大変で面倒です。

ですが、この方法を使えば、クリッピングマスクを解除せずにオブジェクトを追加できます。

トリミングされたオブジェクト

このクリッピングマスクに別のオブジェクトを追加してみようと思います。

まずは、追加したいオブジェクトを配置します。

追加したいオブジェクトを配置した図

次に、配置したオブジェクトを「Ctrl+X(Macはcommand+X)」でカットします。

そして、白矢印でトリミングされているオブジェクトのうちの一つを選択します。

オブジェクトを選択

あとは「Ctrl+F(Macはcommand+F)」で前面へペースト、もしくは「Ctrl+B(Macはcommand+B)」で背面へペーストするだけです。

オブジェクトを追加した図

上下関係は重ねたい一つ上か下のオブジェクトを選択するとよいでしょう。
これでいちいちクリッピングマスクを解除せずに切り抜きたいオブジェクトを追加できます。

2015年6月 5日(金)
Illustratorで行間を詰める

キャプチャ画像

!や?など全角の記号を使用するとフォントによっては変に文字間が開いてしまうことが有ります。

【Altキー】+【←】or【→】
で自由に行間を詰めることができます

キャプチャ画像2
これだとピンポイントに細かい調整が出来ます。

2015年6月 4日(木)
Movable Typeでブログに挿入した画像をサムネイルとして使う方法

Movable Typeでブログ記事を書いた時、ブログ中に入れた画像をサムネイルとして表示したい
という方が結構いらっしゃるみたいなので、今回は弊社の表示方法を例にご紹介します。

Fのサイドメニュー
プラグインの導入も無いので、簡単にお試しできます。


こちら弊社サイトの「最近投稿した日誌」部分を表示させているコードです。

<MTArchiveList lastn="10"> <div class="navColumn clickBox clearfix"> <div class="navColumnLeft"><MTEntryAssets type="image" lastn="1"><img src="<$MTAssetThumbnailURL width="73" height="59"$>" alt="<$MTEntryTitle$>" /></MTEntryAssets></div> <div class="navColumnRight"><p><span><$MTEntryDate format="%Y.%m.%d"$></span><br><$MTEntryTitle$></p></div> <a href="<$MTEntryPermalink$>"></a> </div> </MTArchiveList>


簡単に説明しますと、最新の記事10件分の、サムネイル画像と記事の投稿日時と記事タイトルが
出力されるようになっています。

そしてサムネイル画像表示のコードはこちらの部分になります。

<MTEntryAssets type="image" lastn="1"><img src="<$MTAssetThumbnailURL width="73" height="59"$>" alt="<$MTEntryTitle$>" />


この部分をサムネイル画像を表示させたい部分に貼り付け、widthやheightはお好みで設定してください。
ちなみに<MTEntryAssets>タグはブロク記事アーカイブか、<MTEntries>タグの中で使えます。


ちょっと工夫すればこのようにトップページに新着記事を表示させる時に
サムネイル画像と記事本文を抜粋して表示させる事もできて便利です!
トップページのサムネイル

2015年6月 3日(水)
効率の良い紹介レイアウト

まず、これをご覧ください。
profilebox1.png
紹介がたくさん続くページでは、このように本文の長さに応じてボックスの高さが可変するようなレイアウトで組むのが効率的だと思います。

そこで自分なりに効率の良い組み方を考えました。
もっときれいな方法があるかもしれませんが、最低限の配置に関わる部分の考え方を記述します。

このレイアウトでは上・中・下で三分割したdivをならべます。

上div...左に寄せる部品はfloat:left、右に寄せる部品はfloat:rightを指定します。
中div...横に細長い背景画像を作りbackground:repeat-yを指定します。
写真用のdivをfloat:rightで配置し、img srcで写真を配置します。
高さを指定しないpタグに本文を入力すれば、画像に回り込むように表示できます。
下div...テキストを配置しないので、img srcで画像を配置します。
当然、上・中・下のdivは1ピクセルのずれもなく配置します。
profilebox2.png
これで、テキストの長さに応じてレイアウトも追従するようになりました。

ただしこの方法だと、テキストの長さが写真の高さより短い場合、背景画像が切れてしまう事態がおこります。
profilebox3.png
そのため、短い時の「pタグ 本文」には、画像が表示されるだけの高さをスタイルシートで指定します。

本文のスタイルシートを文章の長さで使い分けるという条件がつきますが、このような紹介をたくさん使う場合、有効な考え方だと思います。

2015年6月 1日(月)
木のような質感を簡単に表現する方法

今回はIllustratorを使って木のような質感を簡単に表現する方法をご紹介いたします。

まずは木のような模様をつけたいオブジェクトを選択します。
今回は後ろ側の茶色の四角に模様をつけていきます。
木のような質感を表現する方法1.jpg

次にメニュー「効果」→「テクスチャ」→「粒状」を選択します。
木のような質感を表現する方法2.jpg

プレビューで表示させながらお好きな値に変更いたします。
木のような質感を表現する方法3.jpg

完成です。所要時間1分!
木の素材探すのに困ってる・・・なんてときに使える方法です!
下の色をもっと薄くしたりなどしたらまた表情が変わってきますのでおもしろいですよ!
木のような質感を表現する方法4.jpg

色が濃すぎたりなどしたら塗りを追加して、木の塗りの方の不透明度を下げたりなどして
濃さを調節もできます!ぜひお試しください☆

簡単無料お見積もり

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