0

mail form, mail form proでエラーが出て送れない

mail form, mail form proでフォームの設定をしていて

エラーが出た時の対処です。

【ケース】

PCサイト、スマホサイトにmail formまたは mail form proを組み込み、Perlタグ
Sendmailタグも設定し、パーミッション設定もした所でテスト送信したら

「指定ドメイン以外から送信されようとしています」(mail form pro)またはspam block(mail form)

と出た。

【原因】

サイトがDNS設定前でしたので、URLがIPアドレスの状態であった。

それをmail form proのプログラムで「URLが変」だと判断してしまっていた。

【原因を探った方法】

mail form→send.cgi

mail form pro→config.cgi

の中に書かれているスパムブロックや、リファラードメインチェックをoffに設定してテスト送信したら

正常に届いた。この検証で、DNS設定後は正常送信されるはずだという事が分かった。検証後、スパムブロックはONに戻しておいた。

 

コツ1

送信テストはsecret windowで検証する(キャッシュが残らないwindowなので、テストに便利)

コツ2

ドメイン移管後数日は不安定なのでメールの届き先を目的のメールアドレス以外にもう一つ

予備で設定する(自分の会社のメールなど。)最初は両方に届く。やり方↓

 

 

mail form→send.cgi  内の設定はカンマ区切りで書く。

‘info@xxxxxxx.com,info@yyyyyyyyyyy.com’

 

 

mail form pro→config.cgi  は、シングルクォートでくくったメールアドレスをカンマで区切って指定する

@mailto = (‘info@xxxxxxx.com’,’info@yyyyyyyyyyy.com’);

 

コツ3

検証時はデバイス振り分けの.htaccessは作動しないように一時的に止めておく

0

yahoo!ショッピングデザインカスタマイズ

—————————————————————————————————-

HTMLで自由なページを作りたい

htmlはフリースペースと呼ばれる箇所のみ入れられます。

内部cssしかできませんので<div style=”color: #EF597B;margin-bottom: 20px;”>ここに文章がはいる</div>

の書き方をします。

外部cssやjavascriptは入れられません。

有料オプションサービス「トリプル」を利用すると自由にjavascriptやhtmlが使えるページにランクアップできるようです。

画像は、商品以外の画像は全て、画像管理のフォルダリストの点線で区切られた下の段に登録していきます。

画像のパスはこちらに変えます。

<img src=”http://lib2.shopping.srv.yimg.jp/lib/ショップ名/画像名.jpg” />

—————————————————————————————————-

■サイドナビのタイトルをテキストではなく画像にしたい

サイドナビのタイトルは横200px縦自由で作ります。

それを登録します。

—————————————————————————————————-

■サイドナビの「ストア内商品カテゴリ」パーツを、テキストではなく画像にしたい

カテゴリナビ用の画像を横198pxで(縦は自由)作って必要な個数登録しておきます。

(1)ページ編集→画像にしたいカテゴリに行く→編集をクリック

[参照]ボタンを 押して「画像選択」パネルから選択します。

(2)ストアデザイン→サイドナビのタブをクリック→ストア内商品カテゴリを選択

タイプ3を選択して更新

—————————————————————————————————-

■商品画像を登録したい

600px × 600px  72dpiで用意するとぴったりです

画像管理のフォルダリストの上の段で該当カテゴリを探し、そこに登録していきます。

その他の画像は画像管理のフォルダリストの点線で区切られた下の段に登録していきます。

—————————————————————————————————-

■グローバルナビを画像にしたい

グローバルナビ用の画像を用意して登録しておく。横サイズは950pxをナビの数で割った幅で作ります。ただしliの右にmarginが3px入っているのでその分を引く。(縦サイズは自由)

(1)ストアデザイン→ヘッダー→ストアサービス

(2)下にボタン画像を登録する

—————————————————————————————————-

■コンテンツ内の新着情報のタイトルを画像にしたい

横730px、縦自由サイズで画像を作っておく。

それをストアデザインの所で登録する。

0

LP(ランディングページ)を作る時に意識していること

長い文章がだらだらつづくWebページ…疲れるし、あまり読みたくないですよね。

ランディングページのホームページ制作するときには

ランディングページ集めました。
などを参考にしています。自分なりに気づいたいくつかの法則をまとめました。

LPのコツその1

LPは通常のホームページよりも、より一層、漫画のように、絵で追って閲覧者をスッと納得させられる流れを目指しています。
原稿をもらったら一旦通して読み、テキストが多いな、と感じた部分はそれを図式化します。

これはhutureのLP抜粋です

lp4

 

————————–デザインする前の元の原稿 ——————————————

「目的」を明確にする為のヒアリング

ホームページを作る「目的」を明確にすることが

ホームページ制作の第一歩。

「ホームページを制作しようと思ったきっかけは?」

「なぜホームページをリニューアルされたいのですか?」

自社(店舗)をアピールするための手段として必要ならば、

なぜアピールが必要なのでしょう?

「信頼・安心を与える為のブランディング?」

「それとも集客?」

「リピート客への情報提供?」

お客様によって目的は様々です。

目的が違えば使用する道具もまた異なります。

お客様のお悩み解決に最も適した道具は何か(=どんな ホームページを作るべきか)を考えるため、まずは現状のヒアリングをしっかりとさせていただくところから始めます。

ホームページは目的ではなく手段!

目的を達成させるための道具なのです。

——————————————以上———————————-
紙に一旦書き出して、図に出来ないか整理します。ここでは、

「ホームページを制作しようと思ったきっかけは?」

「なぜホームページをリニューアルされたいのですか?」

をQ&Aのような大きな問いかけにできないか?と考えました。
そして矢印を引いて、

「信頼・安心を与える為のブランディング?」

「それとも集客?」

「リピート客への情報提供?」

をアイコンのように扱えないかと思いました。

LPのコツその2

フォントサイズのジャンプ率が大きい分、余白も広めに。

ゆったり見えるように、地と文字とのマージンを30pxにしています(通常のページでは10px程度が多いです)

lp3

こちらは20px
lp2

LPのコツその3

LPに限りませんが、図が多くて色がバラバラになりやすいのでカラーパレットをつくっておく。
色々探していて、使いやすかったカラーパレットツールは「カラースキームデザイナー」です。

ここに行くとページ左半分に大きい虹色の色相環が確認できます。

大きい虹色円盤の右下にRGB:  という所があるのでそこにメインカラーを「ff0000」のように入力

します。大きい円盤の上に小さい円盤が6つ横並びになっています。それをクリックすると

自動生成されたカラーパレットが6種類見られます。

 

0

デザインテイストの参考にしているもの

トップページのデザインは、ディレクターから承った参考サイトに沿って
色や雰囲気を決めています。

それ以外でホームページ制作で参考にしているサイトについて書きます。

下層ページは、トップページのデザインを引き継ぎますが、
トップページには出てこない図表などの見やすさに別途工夫が必要です。
例えば「ご予約の流れ」ページを作るとします。

google検索で、検索枠に
「ご予約の流れ」と入れます。
デフォルトは「ウェブ検索」ですが、ブラウザの上の方に画像、地図、ショッピング…などが選択できるようになっています。
隣の「画像」をクリックしますと他で作られているデザインが出てきますので、いくつか見て一番分かりやすいのを
参考にさせていただいています。以下はそれをもとに作った図です。

名称未設定 1

「お客様の声」と画像検索して、結果を参考にして作ったお客様のご感想欄です。

 

名称未設定 1

無彩色のデザインは、実は一番難易度が高いです。
そんな時はこちらを見て行きます。

ヘッダーに注目。白いサイトデザイン
http://www.web-mihon.com/category/color/09/

テーブルも色や線次第で色々と格好良くできます。
http://icant.co.uk/csstablegallery/tables/89.php

では、配色や雰囲気の点で「ギリシャ風」「ベトナム風」「エジプト風」などのテーマにしたい場合はどうでしょうか。
私は、レストランに行った時にそこに置いてあるフライヤーやショップカードを集めています。
デザイナーになる前からそういう物が好きでした。

お店の調度品を撮らせてもらう事もあります。
これは趣味の範囲になってしまいますが、木畑亭というイタリアンレストランにて(撮影許可済)。

IMG_0630

IMG_0629

IMG_0632

 

これをフォトショップに取り込んで、コンセプトから配色用カラーパレットを自作する のようにして使う事ができます。

自分の資料がない場合は、その国の観光局サイトや民族衣装を検索して配色をつかんでいます。

 

0

自然と人工的な配色

自然に見える配色と、人工的に見える配色について説明します。

 

◎ナチュラルハーモニー
=ナチュラルな配色。
暖色系の色は明度を高くし、寒色系の色は明度を低くすることで
自然な色を演出できます。
さらに、明るい色は黄みよりの明るい色にし、
暗い色は青みよりの暗い色にすると自然な印象になります。

 

◎コンプレックスハーモニー
暖色系の色は明度を低くし、寒色系の色は明度を高くすることで
不自然な色を演出できます。
さらに、明るい色は青みよりの暗い色にし、
暗い色を黄みの明るい色にすると不自然な印象になります。

 

※人工的なイメージがある配色
基本的には鮮やかな色をぶつけあうと、人工的でぎらぎらとした
刺激のある色になります。
ですので、上記の二つを表現したいときはこのような鮮やかな色の
使いすぎは極力さけたほうが良いでしょう。

人工的なイメージの配色の組み合わせは
「不思議さ」「未来的」「幻覚」などをテーマにホームページ制作を
する際には当てはまります。そのときは、100%鮮やかにすることをおすすめします。

0

スタイリッシュな配色

スタイリッシュな配色

 

スタイリッシュとはハイセンスという意味になります。
余白を多めにとる・寒色をベースに色数を少なくしてシンプルにまとめる。
などするとスタイリッシュな配色に近づけることが出来ます。

 

●スタイリッシュのイメージとは

無彩色で無機質を演出し、寒色のグレイッシュ・トーンを基調にまとめると
スタイリッシュを表現できます。
色の数を最小限に抑えれば抑えるほど、スタイリッシュ感が出ます。

 

●クールさをイメージさせる配色

透明感のある色を高明度・中彩度でまとめると、都会かつ清楚な印象になります。
明るいトーンの同一色相でまとめるとクールさをイメージさせる配色となります。

 

●スタイリッシュな配色においてのNG

・暖かさを感じさせる色の使用
※人工的で無機質な感じを表現することがスタイリッシュな配色に
なるので、基本的にはワンポイントでも暖色が入るとイメージが変わってきてしまいます。

0

SEOに配慮したデザイン

Web制作でデザイン担当者がSEOを意識した場合、できることについてです。

 

・スライスの書き出し品質は抑え目に。jpg80以下にする。(離脱率を下げ、クリック率を上げるため。クリック回数=SEO上昇)

 

・トップページにSNSが複数リンクされているデザインはNG

seo狙いでフェイスブック、アメブロ、twitterなど複数のsnsをたくさん不自然に連動するのはペナルティになりやすいです。

アメブロは商用利用不可になったそうです。ベストなのは ワードプレスで独自ドメインで作ったブログ一個にすること、もしくはgoogle plusひとつに絞ること。

 

・下層ディレクトリの名前をローマ字にする。英語じゃなく、読みを日本語にする。goaisatsu.html oshinagaki.html gakkou.html menyu.html …

 

・一つのドメイン内で、内部リンクが出来るような文章にするとSEOが強化されます(Wikipediaのようなイメージ)

 

・10年前に作ったキャンペーンサイトなどは、放置しておくと他に悪く影響します。要らないものは消しましょう。

0

共通色を使った表現

■ホームページ制作時のデザインにおける配色について説明します

 

共通色を上手く使った表現方法

 

コンテンツの内容が豊富で要素が多く、全体がごちゃごちゃしてしまった・・・
そんなときは離れた場所に同じ色や同系色・類似色を配置することで全体が
まとまりやすくなります。

 

ここでポイントなのは、近い場所ではなく、離れた場所かつ
大きな色面積と、小さい色面積を組み合わせた方が効果が
出るということです。

 

これらを上手く活用することで、全体がまとまり、
引き締まった印象を与えることが出来ます。
また、色面積を大きくすると力強く活気のある印象を与えることも出来ます。
こちらに関しては、また次回に説明させていただきます。

 

0

コンセプトから配色用カラーパレットを自作する

Web制作のカラーリングの方向性を決める時に、無限の色の中からでは迷うことがあります。

CSS niteの勉強会で習ってきたオリジナルのカラーチャートの作り方です。

Kularのパレットは便利で有名ですが5色くらいなのでもう2、3足りないことがあります。これならカバーできます。

 

クライアントから寺をテーマにしたサイト依頼があったとします。

寺から落ち着き、緑の豊かさ、静謐、伝統などのキーワードを派生させ、イメージを膨らませます。

写真を集めてphotoshopで切り張りします。

tera

photoshopフィルタのモザイクをかける。細かすぎず

大きすぎずの所で調整するのがポイント

parette

必要に応じて、トーンカーブでコントラストを付けて明るさだけ調整してください。

地味な中に、差し色が入った結果となりました。

これを知る前まではただ茶色や緑の重みのある色をそれらしく並べていたと思いますが、

全体を引き締める差し色の役割が大事だと学びました。