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

Web以外でインスピレーションを受けたもの

ホームページの役割の一つとして「物を売る」事があります。

特にバナー広告の部分はそれが強いと思います。

バナーはワイヤーに指示がなく、イチから考えることが多いので、

そんなときにトレンドで参考にしているのは駅に置いてあるフリーペーパーです。女性誌などを買うとターゲットが

片寄ってしまいますが、こういうのは乗客の広いターゲットを対象にしていて

様々なパターンの広告が網羅されているのでよく見ています。

 

↓どのページも写真がきれいでフォントもお洒落。イラストも洗練されています。

●東急電鉄の「SALUS」

●東京メトロの「Metro min.」「metropolitana」

↓今、出している新商品や人がどこにレジャーに行ったりするか知ることができます

●「Tokyo trend Ranking」

↓OLさんがどんなものが好きか、どんな習い事やセミナーが流行っているかが分かります。

●「L’ala Pado Plus」

 

 

今月のMetro minでは、無形文化財に指定された和食がピックアップされていました。それに伴い表紙も伝統料理のイラストとなっていました。

手書き風の文字がお洒落で洗練された表現を一層引き立てていました。

アクリル絵の具で描かれたようでしたが、手間がかかるので、取り急ぎ色鉛筆で真似してみます。

最近友達とマルゲリータを食べに行ったのでその記憶を。食べ物はベースに黄色を全体に敷くと美味しそうに見えます

 

IMG_0961

 

 

↓色を出来るだけ濃く重ね塗りをしていきます。焦げの粒粒は外側は多く、内側に向かって少なくなっています。

英語も書き足しました。イタリアンレストランのホームページ制作でバナーやメニューを担当する機会があったら、使えたら良いと思います。

IMG_0965

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

photoshopで細かすぎて切り抜けない!画像の対処法

 

 

 

 

 

 

原画

女性を切り抜いて他の背景と合成したいけど、髪の毛の所をどうしよう…そんな時の方法です。ホームページ制作だけではなくDTPにも使えます。

なお、この方法はなるべく解像度の高いきれいなデータの方が上手くいきます。
小さいのしかない場合は、消しゴムブラシを不透明度50%くらいにして、すこーしずつ、髪の毛の隙間をちまちまと消していくしかないです。

2950px×2040pxのサイズでためしてみます。
このような最初から背景色がうすい画像の場合、
下のレイヤーに色を敷いておくと後で切り抜き具合を確認しやすいです。
(ここでは水色のレイヤーを敷いています)
0

ペンツールでパスをかきます。体の線は通常通りに、髪の毛はおおざっぱに周りを囲います。

最初

 

 

おおざっぱに不要な背景を消した所。

3
この選択範囲をアクティブにした状態で、「選択範囲」→「境界線を調整」ウィンドウを出します。
2

「境界線を調整」ウィンドウの左の方にブラシマークがあります。ブラシツールの要領で、髪の毛の輪郭あたりを塗っていきます。

OKを押すと、選択範囲ができています。

3

 

この選択範囲を使用して、deleteしてみます。(選択範囲が人物になっている時もあるので、その時は背景を選択するように反転させます。)

ラスト

 

完成です。

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