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

2015年2月27日(金)
EC CUBEでページ毎に内容を切り替える

EC CUBEで商品ごとに内容を切り替える際にif分で切り替えをするのが便利です。

たとえば
サンプル画像
上記のように各商品でグラムや内容が異なる際には以下のように記述します。

サンプル記述
h1などSEOの切り替えでも使用できますのでEC CUBEでは欠かせない記述の一つだと言えます。

2015年2月26日(木)
キーオブジェクトを有効に使う整列の仕方

Illustratorの整列パネルは、複数のオブジェクトを同じ高さ、等間隔に並べたりするのに
大変便利ですが、特定のオブジェクトに高さを合わせたい!となった時
キーオブジェクトを有効に使うのが便利です。


バラバラになっているオブジェクト
こんな風にバラバラになっているオブジェクトを見栄え良く整列させます。

1,整列させたいところを選択する
整列させたいところを選択する

今回は、まず上のアイコンと文字を揃えたいので、選択します。

2,キーオブジェクトにする
キーオブジェクトにする

整列の基準にするオブジェクトをもう一度クリックすると、線が一段階太くなります。
この状態がキーオブジェクトになります。
今回は、一番左の赤いアイコンをキーオブジェクトにします。

3,整列させる
整列パネル

キーオブジェクトにしたら、自動的に「整列」パネルの右下が
「キーオブジェクトに整列」になります(鍵のアイコン)
なっているのを確認したら、「オブジェクトの整列」→「垂直方向下に分裂」をクリックすると、

整列させる

赤いアイコンに沿って文字と他のアイコンが整列されました!

整列しました

他のオブジェクトも「キーオブジェクトに整列」を使って整列させてみました。
一度覚えるとかなり便利なので、積極的に使っていきましょう!

2015年2月24日(火)
シンボル散布ツールでお手軽に装飾


本日は前回作った星を使って、またパーツを作っていきたいと思います。
→前回の記事はこちら
シンボルにしたいオブジェクトを選択
イラレのおもしろい機能を紹介したい、というのが主体なので、
実は私も、イラレでこの機能は初めて使います。

シンボルウィンドウに持っていきます
シンボルウィンドウがでていない人は、キーボードから
「Ctrl + Shift + F11」で呼び出せます。
前回同様、オブジェクトを掴んで放りこみます。

シンボルスプレーツールを選択します
上の、スプレー型のアイコンです。
赤で囲ったはずが、いつの間に消えていたみたいです。すみません。

好きなようにマウスで書いてみてください
左クリックで線を書いてみます。
フリーハンドで適当で大丈夫です。

こんなかんじになります
マウスで書いた線にそって、スプレーで散らすように
オブジェクトが置かれていきます。
これだけでは、均一にシンボルを散布しただけなので
もうちょっとランダム性がほしいかもですね。

アイコンダブルクリックした様子
③でクリックしたアイコンを今度はダブルクリックしてみてください。
もしくはツールを選択してマウスカーソルがスプレー缶になっている時にエンターキー。
こんな画面が現れます。
中程の8つのアイコンで、シンボルの大きさや角度、透け具合など
色々と変更出来るみたいです。

色々いじってみたらこうなります
で、色々いじってみました。
うーん。ちょっとした装飾には散布ブラシで十分かもです。
ただ、マウスでぐりぐり書けるのは楽しいかもですね。

2015年2月23日(月)
文章の中身を理解してもらうために

ホームページは見に来られた方に内容を理解してもらわないと意味がありません。

見た目がとてもキレイなのに全然内容が頭に入ってこないというページでは
せっかく見に来てもらっても勿体ないですよね。

キャッチコピーなしのタイトル

上の見出しだけですと、お相手選びについて書かれているんだろうということはわかりますが、
具体的に何を書いているのか文章を読まないとわかりません。

キャッチコピー入りのタイトル

上のように文章に即したキャッチコピーを入れることによって、
内容が頭に入ってきやすくなります。

デザインしていく上で、見た目のキレイさも重要ですが、
文字の読みやすさ、内容の理解のしやすさなど
複合的に考えていかないといいホームページはできません!

2015年2月20日(金)
Illustratorで写真を背景にした見出しをつくる

見出しのパターンに困ったとき、背景に写真を使ってみるという手もあります。
寂しい見出しこれは赤のグラデーションを塗っただけの見出しです。
これだけでは、ちょっと寂しいですね。
そこで、さりげなく背景に写真を使ってみます。
工場写真工場の写真を使ってみたいと思います。
透明マスクパネル上図のように透明マスクをかけます。
透明マスクをかけた写真そうすると、写真がかなり薄くなりました。
透明マスクのパターンは「輝度」以外にもたくさんありますので、色々とお試しください!
クリッピングマスク後適当な長さでクリッピングマスクを行います。
透明マスクをかけた見出し見出しの上に乗せることで、よりツヤッとした見出しを作ることが出来ました!

2015年2月19日(木)
Movable Typeで構築したページを変更する方法

Movable Typeで構築したページを変更する方法 Movable Typeでホームページを構築しているお客様から、
よく「MTで作られたページはどうやって変更するの?」という
お問い合わせを頂くので方法を簡単にまとめさせて頂きました。

特に、Movable Typeで構築されていたページだと知らずに
FTPソフトを使ってページをアップロードした後、ブログ記事の更新などで
Movable Typeを再構築してFTPで反映した筈のページが古い状態に戻っている
...という事もよくありますので、注意が必要です。

※今回はMTバージョン5の画面で説明しております。

まずはMovable Typeにログインします

MT管理画面ホーム

メニュー「デザイン」の中の「テンプレート」を選択します

「テンプレート」を選択

「ブログテンプレートの管理」画面が表示されます

「ブログテンプレートの管理」画面

編集したいページを選択します

今回は「CSSデモページ」(demo.html)を編集したいと思います。
編集したいページを選択
ちなみにトップページを編集したい場合、テンプレート名がデフォルトの状態でしたら
「メインページ」(出力ファイル名:index.html)になっています。

テンプレートの編集画面が表示されます

テンプレートの編集画面 テンプレートのタイトルを確認し、編集するページが合っていれば編集をします。

コードを編集します

今回はデモページにあるボタンのテキストを変えてみようと思います。
テキスト変更前のボタンはこちら。 変更前のボタン
試しにテキストを変更します。
テキストを変更

一番下にある「保存と再構築」ボタンをクリック!

ここが要注意ポイントです!左に「変更を保存」という青いボタンがありますが、
ここを押してもテンプレート編集画面で変更した内容が保存されるだけの状態で、
変更をホームページに反映させるには、「保存と再構築」ボタンを押す必要があります。
「保存と再構築」ボタン

変更内容が反映されました

変更内容が反映された
これでMovable Typeで構築されたページの変更の作業が完了です!

他のページ(テンプレート)でも、Movable Typeの基本は
テンプレートを編集→保存と再構築になります。

MTにこれから挑戦される方、既にMTを使ってサイトを構築しているけど
編集画面どこだったかな...などお困りの際にこちらのページを見て探してみてください。

2015年2月18日(水)
複合シェイプで便利な吹き出し

せりふを入れる吹き出しを作るときに便利な技です。

まず部品を準備。
長方形には「角を丸くする:10px」を適用。
複合シェイプで便利な吹き出し説明1

ここでパスファインダの「合体」をかけるのですが...
ポイントは「Alt」キーを押しながら「合体」をクリックする点です。
複合シェイプで便利な吹き出し説明2
合体前の形状を保ったまま、合体した形状ができました。
選択すると、もとの形状が確認できます。
複合シェイプで便利な吹き出し説明3

角丸のサイズを保ちながら、形状を変更するのも簡単です。
複合シェイプで便利な吹き出し説明4

元の形状にもどすときは「複合シェイプを解除」、完全に形状を確定させるときは「複合シェイプを拡張」を
選択します。
複合シェイプで便利な吹き出し説明5
「合体」だけでなく「前面オブジェクトで型抜き」「交差」「中マド」でも使えるので、
応用範囲の広い小技です。

2015年2月17日(火)
見出しのちょっとした加工にマンネリ気味になった時

見出しなど、いつもと同じになってしまって、面白みにかけてしまうことありますよね。
いつもと同じフラット、いつもと同じドロップシャドウではちょっとつまらない!
となった時のちょっとした遊びについて紹介します。

こちらは、単に四角の上に文字を置いたパターン。
ただのフラット

これはよくある、ぼかしたドロップシャドウを下にかけたパターン。
こちらもよくあります。
ドロップシャドウを下にかけたパターン

ちょっとそういうのに飽きたら、
曲面っぽくして文字がへこんでいるのもおもしろいです。
しかしよくあるといえば、かなりよくあります。。。
文字がへこんだ感じ

これは、Illustratorのアピアランス効果で「落書き」をつけました!
そしてドロップシャドウをいつもの感じではなく、ぼかさずに遠くにつけてみました。
落書き機能

そこまで物珍しさがあるわけではないのですが、
ちょっちょっと手を加えてみるだけでたくさんのバリエーションができます。
コンテンツの要素に応じて、たくさん使い分けていきましょう!

2015年2月16日(月)
MTカスタムフィールドに関する3つの覚書

MTにてカスタムフィールドを使った構築をしております。
これを再現するためにはどうすれば?この問題を解消するためにはどうすれば?
構築の中で出てくる小さな問題をひとつずつ調査しながら解決し、構築をしました。
今回調べた中で、覚えておきたい3つを書いておきます。


1.MTカスタムフィールドのテキストでn文字まで表示
MTの本文でn文字まで表示させる時に
<$MTEntryBody words="80"$>
というのはよく使いますが、これをカスタムフィールドのテキストで
使おうとしたところ、どうも使えない・・・?
もしかしたら、カスタムフィールドは文字制限まではできないのか?
という不安がよぎりましたが、そんな不便なやつじゃない!
カスタムフィールド用のコードがちゃんとありました。
<mt:EntryListDescription trim_to="40">


2.カスタムフィールドで発生するソース上の無駄な改行をなくす
カスタムフィールドをたくさん作って
<mt:If tag="**">~</mt:If>をたくさん使うと、ソース上に大量の空白行が出てしまう。。
表示上はばっちりでも、SEO的に問題なので、なんとか解決したい。
そこで活躍してくれるのが、MTRemoveBlank
<MTRemoveBlank>~</MTRemoveBlank>で囲うと、囲まれたところで発生する
空白行を見事にきれいにしてくれます。


3.カスタムフィールドでフィルタリング
このカテゴリの記事だけ表示する、とか、
カテゴリで記事の操作ができますが、カスタムフィールドを利用しても
フィルタリングが可能です。
<mt:Entries field:sumaho="表示">~</mt:Entries>
上記はラジオボタンで、「sumaho」というベースネームで
「表示」にチェックを入れた記事のみが表示されるという形。
しかし、カテゴリと違って、カスタムフィールドは
AND, OR, NOT などを使った複数の値を組み合わせたフィルタリングは
できないので注意が必要です。

MT

2015年2月13日(金)
EC CUBEでのSEO対策

EC-CUBEは2.12系までデフォルトでSEO設定機能がありましたが、

2.13系以降なくなってしまいました。



そこで今回導入したのが

SEO管理プラグイン

こちらのSEO管理プラグインです。



管理画面

デザイン管理>PC&モバイルの中にSEO管理という項目が追加されますので、こちらから編集ができます。



SEO管理プラグイン

公開前作業などで便利なnoindex,follow設定も一括で出来ますし設定&編集も非常にわかりやすい&無料プラグインですので2.13系以降の方は是非導入してみてはいかがでしょうか。

2015年2月12日(木)
顔写真が並ぶ時に気をつけること

スタッフ紹介のページなどで、顔写真が並ぶ時があります。
そういった時に、デザインする上で気をつけることを一つご紹介します。
まずはこちらを御覧ください
スタッフb.jpg
写っている方はみなさんなかなかいい写りだと思うのですが、
なんとなくバラバラに見えてしまいませんか?
その原因はというと・・・
スタッフb_2.jpg
トリミングされた写真が、顔のサイズがバラバラだったり、写っている人の位置が寄っていたりして、
これではせっかくいい写真を並べたところでかっこいいデザインにはなりません。
そこでトリミングし直したものがこちら
スタッフ紹介-01.jpg
元写真の関係で限界はありますが、修正前と比べるとだいぶスッキリしたのではないでしょうか?
人の写真だけでなく、同一のものが並ぶ場合は、こういったことに気をつけて見るだけで
見栄えが違ってくることが多いです。
位置やトリミングのサイズなど、すこしだけ気をつけて見てみるといいかもしれません。

2015年2月10日(火)
写真背景からオブジェクトをささやかに浮き立たせる

デザインにおいて、背景に写真を持ってくることが多々あります。
その背景写真の上には文字や情報、写真を重ねることがほとんどなのですが
今回はポピュラーなドロップシャドウを使う方法以外に少し目立たせる方法がないかトライしてみました。

まずは、1ピクセルの線を周りにつけました。
色は白で、透明度を馴染みやすく目立ちやすく、オーバーレイにしています。
なんだか、繊細なイメージがあっていい感じ!
線をつけて浮かせた画像

もし、背景がそこまで重要でなくて、雰囲気を伝えるためなのでしたら
ぼかすと、一気に上に来ますのでとてもメリハリがつきます!
背景をぼかせた画像

色々試してみて、これからも良い見せ方を発見していこうと思います。

2015年2月 9日(月)
パスファインダで複雑な図形を描く

複雑な図形を描く場合、一つ一つ描くのはとても大変です。
そんな時はパスファインダパネルを使用すれば簡単に描くことができます。

パスファインダパネル

パスファインダとは複数のパス(図形)を合成や分割する機能です。

作業前の二つの円

それでは左上から説明していきます。

形状モード

「合体」 合成 複数の図形を合体して一番外側の線を残して合成します。

「前面オブジェクトで型抜き」
前面オブジェクトで型抜き
一番手前にある図形で後ろの図形を抜いたような形にします。


「交差」
交差
重なっている部分が残るような形にします。

「中マド」
中マド
重なった部分が抜けるような形になります。
(色はわかりやすくするためにつけました)

パスファインダー

「分割」 分割 パスを重なった状態に分割します。

「刈り込み」
刈り込み
前面の図形で後ろの図形を切り抜きます。
ただし、塗りを指定していないと使えません。

「合流」
合流
図形を合成します。
これも塗りを指定していないと使えません。

「切り抜き」
切り抜き
後ろの図形で前面の図形を切り抜きます。

「アウトライン」
アウトライン
全ての図形を重なっている部分でバラバラに切ります。

「背面のオブジェクトで型抜き」
背面のオブジェクトで型抜き
後ろにある図形で前の図形を抜きます。

このように重なり順や塗りなどによって様々な加工ができます。
これらを使えば、このような図形も簡単に描けますので、
色々ためしてみてください。
パスファインダーを使った図形

2015年2月 6日(金)
Illustratorでリボン状の見出しをつける

ページの中でも見出し部分は強調しなくてはいけない大事な部分です。
故に、様々なデザインが必要とされてきます。
今回は、簡単に見出しをリボン状に表現できる方法を紹介します。
20150206_2.jpg見出しを四角形で囲みます。
少し外にはみ出すぐらいで作ってください。
20150206_4.jpg次に三角形を下に描き色を暗くします。
スポイトで四角形と同じ色をとり、明度を下げると良いかんじに見えます。
20150206_3.jpg両方に三角形を付けて簡単にリボン状の見出しができました。
このように簡単な工夫でもちょっと凝ったデザインが出来ます。
ぜひお試しくださいませ!

2015年2月 5日(木)
CGIが動かない!と思ったら確認する5つのポイント

メールフォームやアクセス解析システムでよく使われているCGIを使ったプログラム。
ホームページ作成ソフトを購入するとおまけでCGIが付いてくる事もありますね。


CGIをフリーで配布している場所も多いため、手軽にシステムを入れてみたいという方にはぴったりです。


その中で、よく「CGIを設置しましたが動きません!」とご相談頂いた際に
対処法として見ている場所やポイントがあるので、ご紹介します。

CGIが動かず500エラーが出てしまった画面
CGIを設置したけど正常に機能していない状態に出る画面ですね。


パーミッションの設定が間違っている

パーミッションとは、ファイルのアクセス権限のようなものです。
最初に確認すべきはやはりここだと思います!


サーバー会社によって若干違う場合がありますが、
■実行ファイルは「755」
■ログ取得などで使うデータ書き込み用ファイルは「666」
と設定するのが一般的のようです。


パーミッションの設定方法についてはCGI配布元でも大体指示が書かれていますので、
CGIファイルをサーバーにアップロードした後に確認しましょう。


perlのパス名の設定が間違っている

CGIファイルを開くと、一番上に#マークの記述があると思います。


書き方はこの2パターンがあります。
■#!/usr/local/bin/perl
■#!/usr/bin/perl


サーバーによっては、どっちの記述でもCGIが動く場合もありますし、
逆にどちらかの記述じゃないと動かないものもありますので、
CGIを設置する前に確認をしておいた方が良いポイントとなります。


文字コード・改行コードの設定が間違っている

CGIによっては文字コードと改行コードを決められたものに指定しないと動かない場合もあります。


Windowsの場合ですと、「メモ帳」だと調べる事ができませんが、
「TeraPad」「CrescentEve」などのフリーソフトのテキストエディターで
文字コード・改行コードを確認・変更する事ができます。

TeraPadで文字コードと改行コードを見る


sendmailの設定が間違っている

これは主にメールフォーム用CGIを設置する時にある記述です。


主な書き方はこの2パターンがあります。
■/usr/sbin/sendmail
■/usr/lib/sendmail


メールフォームのCGIを設置した時に、フォームは動くけどメールが届かない!
または画面自体も「Internal Server Error」となる場合はこれが原因の時も。


この記述もサーバー会社によって推奨しているものが違うので、
perlのパス名と合わせて事前に確認しておきたいポイントです。


「;」などコードの記述で抜けがある

これも実はありがちなのですが、CGIのプログラミングの記述の中で
「;」「>(かっこのとじ忘れ)」や「input」のつもりが「inut」になっていた等、
コードの記述が1箇所でも間違っているとCGIが全く動かなくなる事があります。


CGIの中身をデフォルトのものから改変した後に動かなくなった場合は、
変更前の状態に一度戻してみると良いでしょう。




他にもサーバー会社によっては追加しなければいけないファイルがあったり、
CGIファイルをアップできるディレクトリが限られていたりと
色々と決まりがあるようですので、CGI設置前に確認してみてください。

2015年2月 4日(水)
アンシャープマスクとスマートシャープの違いについて

Photoshopのシャープツールには、様々な機能がありますが、その中でもよく使われるのが
アンシャープマスクと、スマートシャープ機能です。
特に、アンシャープマスクはかなり使うと思われますが、ある時、
「アンシャープマスクとスマートシャープってどう違うんだ?」という疑問が出てきたので
調べてみると、かなりの違いがありましたのでご紹介します。

まず、こちらが補正前の写真です。
補正前
この写真に、それぞれのシャープをかけてみます。

①アンシャープマスク
アンシャープマスク補正後
全体的に輪郭が際立ち、くっきりした画像になりました。

②スマートシャープ
スマートシャープ補正後
手前の花を中心に、くっきりしすぎず、適度にシャープがかっています。


2つのシャープ機能を比較してみました。
比較
こうして比べてみると、違いが一目瞭然です。
アンシャープマスクは、全てのピクセルに対してシャープネス処理を行う機能なので、
場合によっては輪郭が強く出すぎることがあります。
一方、スマートシャープは、輪郭を過度に強調させることなくエッジを際だたせることができます。

過度なシャープ処理を行うと、不自然なデジタル感や遠近感がなくなってしまうので
自然なシャープ処理を行いたい場合にはスマートシャープ、
印刷用にシャープ処理を行いたい場合にはアンシャープマスクと
用途を使い分けて、思い通りの写真加工を行いましょう!

2015年2月 3日(火)
地図の線路を簡単に作成

Illustratorで地図を作る時に結構面倒なのが線路です。
でもアピアランスを使えば簡単に作れて、しかも修正もしやすいです。

まず任意の太さの線を引きます。
任意の太さの線

次にアピアランスで新規の線を追加します。
新規の線を追加

追加した線を白にして太さを若干細くして破線にします。
新規の線の設定

太さや線分や間隔を調整すれば完成です。
線路のような線完成

線なので、変形も自由自在です。

簡単無料お見積もり

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