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

2015年11月30日(月)
ECCubeの商品一覧で、一覧コメントにhtmlタグを使って表示する方法

商品詳細のコメントはHTMLタグで表示されますが
商品一覧のコメントはHTMLタグを入れても表示されないですよね。

実は、とても簡単な方法で表示させることができます!
(ECCube 2.13.x)

まずは管理画面
1.商品管理>商品マスターから、htmlタグ表示をしたい商品を選らんで、
「一覧-メインコメント」の欄に、タグ入りのコメントを入れて登録・更新をします。

EC管理画面商品

2.デザイン管理>PC(もしくはスマホ)>ページ詳細設定から
「商品一覧ページ」を選び、コメントを表示している個所を以下のように書き換えます。

★PC版の場合
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>
<div class="listcomment"><!--{$arrProduct.main_list_comment|nl2br_html}--></div>
★スマホ版の場合
$($(".list_area .listcomment").get(maxCnt)).text(product.main_list_comment);
$($(".list_area .listcomment").get(maxCnt)).html(product.main_list_comment);

EC管理画面一覧

登録・更新をします。

3.商品一覧ページをみると、コメントがHTMLタグが効いて表示されます。

EC商品一覧

ページを目立たせたいときなどに是非使ってください!

2015年11月27日(金)
フォトショップで画像解像度を変える時の注意点

印刷用の写真をホームページで使用する場合、
印刷用の写真は解像度が300dpiになっているので、
web用に72dpiにする必要があります。

「webおよびデバイス用に保存」で保存すれば問題ありませんが、
画像自体の解像度を変える場合は注意が必要です。

元画像

解像度を変えるパネル1
「画像解像度」で解像度を変更する場合、「画像の再サンプル」にチェックが入っていると
ピクセル数が減ってしまい、画像が粗くなってしまいます。

解像度を変えるパネル2

粗くなった画像

ですので、解像度をかえる場合は、「画像の再サンプル」のチェックを外してから変更してください。

解像度を変えるパネル3

こうすることで、ピクセル数を減らさずに解像度を変えられるので、
画像が粗くなりません。

元画像

フォトショップで解像度を変える時はご注意ください。

2015年11月25日(水)
スマートフォンでmarqueeを再現する方法

スマホのような限られた狭い範囲で、レイアウトを崩すことなく文章を表示する場合、
スクロールで文字を表示するmarqueeが有効です。

ただしmarqueeタグは非推奨であり、今後使えるとは言い難いです。
また文字がデータベースに由来する場合、システムに影響を与える要素を減らしておきたいです。

そういう時は、cssで再現するのが効率的です。
条件はie,chrome,safari,operaに対応させておく点です。
marqueeが動作しないと文字が横にはみ出してレイアウトがくずれるため、
可能な限りのブラウザで動作することが望ましいです。

cssの記述でポイント
1.全てのブラウザ分の記述(-webkit、-moz、-ms、-o)をする。
2.文字列の長さは%で指定する。
こうして作ったのがこのサイトのmarqueeです。
背景は別に指定しています。

marquee.png
文字に制限の多いスマホサイトで、有効な表現だと思われます。

2015年11月24日(火)
ホームページの見せ方を変えることで売り上げが上がる


お客様を変えるより、ホームページの見せ方を変更する方が売れるようになります。
良い部分をしっかりと出して、お客様が望む姿に変えていく。魅せるものを見せていけば、輝いていきます。
一生懸命に仕事をしている人ほど、素晴らしく売れるホームページを持つことが出来ます。
技術の上達とそれをしっかりとアピールできるホームページがあれば、
ブランド力の向上となり、お客様の層も変わってきます。
見せ方を変えるだけで、評価も変わる。お客様のお問い合わせの質が上がる。
良いホームページを持つことは企業として最大の魅力です。

サービス内容はそのままで良いところを最大限に引き出し、
ひょうたん温泉様は創業以来最高売り上げを達成と大成功しました。

img-14-151124.jpg

会社のサービスや事業は変えていません。
ホームページの見せ方を変えるだけで「売れる」会社に変化します。

2015年11月20日(金)
ぼかしの使い方

柔らかい印象を与えたい時は、ぼかしを使うことがあると思います。
Illustratorでぼかしを使う時、Illustrator効果のアピアランスからぼかしを付ける方法と
Photoshop効果のぼかし(ガウス)を使う方法があります。

それぞれ

パット見は同じようなものですが、違いは

それぞれの説明

アピアランスのぼかしは内側に、ガウスの方は外側に向かってぼかされます。


より自然な感じで、ふわっとぼかしたい時は掛け合わせることをおすすめします。

掛けあわせ

するとオブジェクトと背景の境界線がほとんどわからなく馴染みました。
色々な方法を組み合わせて、デザインの雰囲気を作っていってください。

2015年11月19日(木)
一部分だけ色を変える方法

撮影して、片付けて、いざ写真を使おうとすると
ここの色やっぱり違う色のほうがよかったな・・・と思う時があります。
でもまた用意するのも大変ですよね。
そんなときは、photoshopで加工してしまいましょう。
ネクタイ色IMG_7066.jpg

まず、色を変えたい部分をパスツールを使って選択範囲を作ります。
わかれている場合は複数選択範囲を作ります。
選択.png
あとは「色相・彩度」の調整レイヤーを作り、変えたい色に調節するだけです。
調整レイヤーを作らずに色を変えることは出来ますが、
調整レイヤーのほうが元画像とは別になっているため後からでも変更が可能なので便利です。
調整レイヤー.PNG
レイヤー.PNG

これで完成です。
ネクタイ色変更IMG_7066.jpg

2015年11月18日(水)
楽天のトップページリダイレクトの注意点

楽天市場でデザイン的に凝ったページを作る場合、
まず自前のトップページを表示して、インパクトを与えたいものです。
理屈では楽天が用意しているトップページから、自前のトップページ(ただし、楽天が用意したFTPにアップする)に
リダイレクトをかけることになります。

具体的な手順は
1.楽天GOLDと呼ばれるFTPサイトに自前のトップページのデータをアップする。
ルートフォルダにindex.htmlという名前で置く。

2.RMSにログインし、デザイン設定 → 「トップページ設定」のトップページ編集 →
表示ページ選択:「旧R-Storefrontで作成したトップページを表示する」を選択。
楽天は旧R-Storefrontのトップページからしかリダイレクトできない仕様になっている。

3.サイドメニューの一番下にある「旧R-Storefront」 → 「説明文」の「画面上」 →
「GOLDで作成のトップページにジャンプする」にチェックを入れて、具体的な秒数を選択する。

リダイレクトの設定
ここだけスクリーンショットを用意しましたが、
これはリダイレクトを一度設定すると、旧R-Storefrontの画面からもリダイレクトするという
謎の仕様があるためです。
うっかり0秒にしてしまうと、瞬時にリダイレクトしてしまうので、この画面での操作が不可能になります。

その時は、ブラウザのショートカット「Alt+←」を連打しながらなんとか「説明文」の「画面上」を選んで
リダイレクトの秒数を選びなおしましょう。
リダイレクトの秒数は、最低2秒ぐらいがベストだと思います。

最後に、「説明文」の「画面下」に「〇秒後にトップページにジャンプします」と記述しておけば
自然なページ移動を印象付けられます。

2015年11月17日(火)
縦長のサイトには訴求力がある

縦長のページには意味があります。


売れるサイトの特色は、クリックの数を少なくすることです。
1ページに内容を詰めストーリー性を重視して、お客様が次を見たくなるように見せた方が
成約率が高くなり、売れるサイトに繋がります。


TOPページにはありきたりの情報しかない、料金のページには料金の情報しかない、
情報がどこにあるのかわからない場合や、次に見たいものがない場合は
お客様の興味がなくなり離脱率が高くなり、お問い合わせに繋がりません。


例えばこの整体のサイトのTOPページでは
・症例別メニューを置く→自分の症状にあったページの閲覧が出来る
・会社の強みを大きくみせる→信頼感を与え、興味をそそり次を見たいと思わせる
といった要素が縦長のページの中に含まれています。
たてなが.PNG


私達は1クリックでお問い合わせ、最低3クリック以内にどこからでもお問い合わせができる
訴求力のあるホームページ制作を心掛けています。

2015年11月16日(月)
メルマガや DM でお役立ち情報を発信してファンを増やす

植えつけた企業ブランドをどこまで成長させるのかということは、大切な事です。

どこまで良い人だと理解させられるのか。
どこまで本物の人物なのかを毎月植え付けて信頼を勝ち取らなければいけません。

一度あった人の事はすぐに忘れてしまいます。
しかし、2度3度あった人は親近感が湧いてきて中々忘れません。

忘れられないような人間になる一番簡単な方法は、
お客様のことを第一に考えた非営利情報を発信することです。
営利情報を発信すればするほどお客様は煙たがっていきます。
ブランド力なんてすぐに崩れます。

お役立ち情報や心境を毎月送る。
これを徹底すればブランド力はついてきます。

初めて見積もりあった人にも送ることで、親近感を湧いてくれる。 初めて見積もりあった人にも送ることで、親近感を湧いてくれる。
なぜそこまで真剣なのか、疑問をいだいてくれる。
メルマガやニュースレターで心の壁がどんどん近くなります。
それは、既存のお客様に対してもそうです。

F さんいつも頑張ってるね!応援してるよ。いつも楽しみにしてる。
働き過ぎだね。こんなことが会社で起きてるんだね。

一緒に会社を経営しているような気持ちになります。
応援されればこそ、ブランド力があるということです。
お客様との心の壁を取るために近況や頑張っていることを配信をして欲しいです。
ニュースレター

2015年11月13日(金)
思い通りの写真がない場合の対処法

写真を使用する場合、イメージ通りのカットがあればいいのですが、
どれも一長一短でどうしようもない...という場合は
いっそのこと画像を合成した方が早いです。

例えば、この牛の前にある柵を消したい場合、
地面などはコピースタンプツールでうまく消せますが、
牛の顔や身体の部分となると大変です。
合成前の写真

なので、顔の角度などが近い画像と合成します。
合成に使う画像

まずはコピースタンプツールを使って、地面などの柵は消していきます。
柵をおおまかに消した画像

次に合成する画像を切り抜き、フチは馴染みやすいようにボカします。
合成する画像

重ねたら、角度や大きさ、色を合わせて完成です。
合成した画像

2015年11月12日(木)
横並びのliを下揃えにする

EC CUBEサイトの構築で、ボタンデザインを変更するとボタンが揃わなくなってしまいました。
fo1112-1.JPG
EC CUBEはデフォルトでCSSが入っているため、上手く使わないとバッティングが起こり崩れの原因になってしまいます。

fo1112-2.JPG
cssを見てみるとこのような記述になっていました。

fo1112-3.JPG
fo1112-4.JPG

「display」を「inline」から「inline-block」に変更して位置を指定する「vertical-align: bottom」も追加しました。
これで無事下揃えが出来ました。

2015年11月10日(火)
成功する会社には文章作成がある


文章があるとお客様から好かれるのは当然ですが
会社の内部社員への指標にもなります。
古くからの強い企業は指標があるのです。
書くことで売上が2年後に2倍になり、離職率が減り社員と一丸となれるワードがあります。

「御社が仕事を通じてお客様に伝えたいこと」
「あなたが仕事を通じてスタッフに伝えたいこと」

上記を3行で書いてください。
仕事を通してお客様に伝えたいこと、安心を与える。責任ある仕事をする。など
ありきたりの言葉を使用しても、正直何を持って安心や責任という事に当たるのでしょうか。

あなたの会社らしい
「御社が仕事を通じてお客様に伝えたいこと」
というのはどういうことなのでしょうか。

理念作りが出来ると、会社は具体的に働くことができ、とにかく良い方向にいきます。
文章を書いてみてください。
「御社が仕事を通じてお客様に伝えたいこと」
これを書けるようになるだけで大きな進歩となります。

IMG_2023.jpg

ホームページ制作Fではお客様が書いた文章をしっかりと理解し、デザインに入ります。
ありきたりなものではなく、見る人が読みたくなるものに仕上げます。

2015年11月 9日(月)
遠方でも初回打ち合わはご安心ください!

全国を相手にしているホームページ業者は
多くの事例を持っているため売上をホームページで上げることがうまい会社となります。
私達は小さなところから大きなところまで作成させて頂き、ホームページを使用した売れるノウハウを構築しております。

遠方の為、打ち合わせが不安だと考えてらっしゃる方もおりますが
実際弊社では全国のお客さまが沢山いらっしゃいます。
9割以上が圏外のお客さまです。

何かあったときに、駆けつけてくれるから近いところがよいと考えてしまいがちです。
しかし、近い会社が全国でも成功実績を残している会社かどうかわからないまま
失敗してしまうケースも多く見受けられます。

拠点が離れていても行えるテレビ電話での打ち合わせを
私たちは7年間以上行っております。
いままで会って話す打ち合わせをしていたお客さまからも好評をいただいております。

遠方でもご安心ください

テレビ電話の後は、実際にお会いして打ち合わせをさせて頂いております。
1度顔を合わせて打ち合わせをしておりますので、
お会いするとさらに詰めたお話をすることができ、
お会いした時の打ち合わせもスムーズにすることができております。

テレビ電話の設定でわからないことがありましたら、弊社スタッフがサポートさせて頂きますのでご安心を。
目標をしっかりと達成できるホームページを私達と一緒に作成して行きましょう。
お気軽にご相談ください!

2015年11月 6日(金)
メニューの出し方

ホームページに於いて、メニューの出し方というのは重要です。
クリックされなければ意味がなく、またホームページ内で迷子にさせないよう
必要な場所に適した配置をしなければいけません。

ただメニュー名を書いて並べるのは簡単ですが、多ければ多いほど、
メニュー名を読ませてしまい、行きたいページはどれか、探させることになります。

できるだけ瞬間的に行きたいページに行ってもらうように、
尚クリックしたいと思ってもらえるよう、メニューを並べるだけでなく
カテゴリ分けして並べる方法がオススメです。
並べたメニュー

主要メニューは大きくアイコンを用いて作成し、
今いるページがわかるよう、そのページに居る時はボタンのデザインが変わる仕様にしています。

また、非営利のお役立ちメニューに関してはページ名の文字だけでは
なかなか伝わらず、クリックを誘発することが難しいので
わかりやすくイラストを用い、他のメニューとの差別化をしています。

ボタンを並べただけでもメニューボタンですが、
少しの工夫で使い勝手はとても良くなります。
是非、試行錯誤して使いやすいメニューを作って下さい。

2015年11月 5日(木)
実際に体験した感動をホームページで伝えます

ホームページは企業のことを全て理解すればするほどいいものが出来上がります。
だからこそ、しっかりと打ち合わせをして、どんな想いで仕事をしているのか。
どんな現場なのか、今まで培ってきたものは、これから望むことは、全てを聞けるようにしていきます。
お話を聞いた後は、実際に体験をしに行きます。
現場を体験すればこそ、お客様が望んでいること、依頼者がどんな想いなのか、肌で感じて、空気を感じます。
そうすることで、躍動感の詰まったデザインが出来上がります。
必ず体験するからこその強さが私達にはあります。
そして、会社のことを一番好きになることも重要な要素です。
体験.PNG

2015年11月 4日(水)
スライダーの設定に関して

ホームページにおいて、動きでコンテンツを印象付けるのがスライダーです。
「閲覧を単調にさせない」「変化やメリハリをつける」役割があります。
スライダーは初心者でもOKなシンプル機能ですが、その中にはユーザーニーズに応えるオプションがたくさんあり、
たいていの事であれば「痒い所に手が届く」ようにできている、奥深いものです。

今回はそういう手もあるか、という点から。

たいていのスライダーは「ファイルを置く」「head内で宣言し、オプションを指定」「様式にそって記述し、cssで整える」で使えます。

中にはオプションで所定の機能(ページャー)を使う宣言をしているのに、なぜか出てこない、ということがあります。
もちろんファイルもおいています。

原因は「cssでその機能に関わる部分に、display:noneを記述して表示させないようにしている」でした。

自分はheadで宣言する、と思い込んでいると気付きにくいと思います。
なるべく様々な方法をおさえて、効率的に見栄えの良いホームページの制作を目指します。
slidersample1.jpg

2015年11月 2日(月)
スマホサイトはなぜ利益に貢献するのか

スマートフォンサイトはとても売れています。
しかし、1 つ問題があります。

PC サイトで売れている人のみが売れているということです。
PC サイトで売れていない人が作成しても全く売れません。
スマホサイトから作成して
PC サイトを作成したいという方も多いのですが、これはまた茨の道の仕事となります。

PC サイトは情報が多く乗せられるのですが、
スマホサイトは PC サイトの情報の 2 分の 1 の情報で作成することができます。
ということは、スマホサイトから PC サイトにする場合は、
後の 2 分の 1 の情報を追加しなければ詰まった売れるホームページができません。

逆に売れている詰まったサイトを運営していると、
情報を精査してスマホサイトに詰めていくだけですので
売れるサイトが必然的に 100%以上の確率で出来上がります。

弊社ではまずは PC サイトを売れるまで責任を持ち、
そのあとにスマホサイトを作成する流れを推奨しております。
売れるのが確実に分かっているものとなりますので、
安心して仕事として受けることができます。

スマホサイトは売れている人が持つものであり。
売れていない人が持つとツライ結果がおきますので用心ください。

売れているサイトはスマホを作ると、
売上が 1.4 倍ほど伸びる傾向になっております。
流行りだからといって、見切り発車をしないようにして下さい。
スマホでも売れるサイトと売れないサイトの極意はあります。
スマホ写真

簡単無料お見積もり

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