WEBデザインは書籍を読んでもわかりづらいところがあると思います。ここでは現役のWEBデザイナーがテクニックを覚書として更新していきます。WEBデザイナーの覚書WEBデザインは書籍を読んでもわかりづらいところがあると思います。ここでは現役のWEBデザイナーがテクニックを覚書として更新していきます。proでフォームの設定をしていてエラーが出た時の対処です。【原因】サイトがDNS設定前でしたので、URLがIPアドレスの状態であった。proのプログラムで「URLが変」だと判断してしまっていた。pro→config.cgiの中に書かれているスパムブロックや、リファラードメインチェックをoffに設定してテスト送信したら正常に届いた。この検証で、DNS設定後は正常送信されるはずだという事が分かった。検証後、スパムブロックはONに戻しておいた。windowで検証する(キャッシュが残らないwindowなので、テストに便利)コツ2ドメイン移管後数日は不安定なのでメールの届き先を目的のメールアドレス以外にもう一つ予備で設定する(自分の会社のメールなど。内の設定はカンマ区切りで書く。-■HTMLで自由なページを作りたいhtmlはフリースペースと呼ばれる箇所のみ入れられます。20px;”>ここに文章がはいる</div>の書き方をします。外部cssやjavascriptは入れられません。有料オプションサービス「トリプル」を利用すると自由にjavascriptやhtmlが使えるページにランクアップできるようです。画像は、商品以外の画像は全て、画像管理のフォルダリストの点線で区切られた下の段に登録していきます。画像のパスはこちらに変えます。-■サイドナビのタイトルをテキストではなく画像にしたいサイドナビのタイトルは横200px縦自由で作ります。-■サイドナビの「ストア内商品カテゴリ」パーツを、テキストではなく画像にしたいカテゴリナビ用の画像を横198pxで(縦は自由)作って必要な個数登録しておきます。押して「画像選択」パネルから選択します。72dpiで用意するとぴったりです画像管理のフォルダリストの上の段で該当カテゴリを探し、そこに登録していきます。-■グローバルナビを画像にしたいグローバルナビ用の画像を用意して登録しておく。横サイズは950pxをナビの数で割った幅で作ります。liの右にmarginが3px入っているのでその分を引く。-■コンテンツ内の新着情報のタイトルを画像にしたい横730px、縦自由サイズで画像を作っておく。それをストアデザインの所で登録する。gR2VZguFkaRmホームページの役割の一つとして「物を売る」事があります。バナー広告の部分はそれが強いと思います。バナーはワイヤーに指示がなく、イチから考えることが多いので、そんなときにトレンドで参考にしているのは駅に置いてあるフリーペーパーです。女性誌などを買うとターゲットが片寄ってしまいますが、こういうのは乗客の広いターゲットを対象にしていて様々なパターンの広告が網羅されているのでよく見ています。↓どのページも写真がきれいでフォントもお洒落。イラストも洗練されています。↓OLさんがどんなものが好きか、どんな習い事やセミナーが流行っているかが分かります。minでは、無形文化財に指定された和食がピックアップされていました。それに伴い表紙も伝統料理のイラストとなっていました。手書き風の文字がお洒落で洗練された表現を一層引き立てていました。アクリル絵の具で描かれたようでしたが、手間がかかるので、取り急ぎ色鉛筆で真似してみます。最近友達とマルゲリータを食べに行ったのでその記憶を。食べ物はベースに黄色を全体に敷くと美味しそうに見えます↓色を出来るだけ濃く重ね塗りをしていきます。焦げの粒粒は外側は多く、内側に向かって少なくなっています。英語も書き足しました。イタリアンレストランのホームページ制作でバナーやメニューを担当する機会があったら、使えたら良いと思います。gR2VZguFkaRm長い文章がだらだらつづくWebページ...疲れるし、あまり読みたくないですよね。ランディングページのホームページ制作するときにはランディングページ集めました。自分なりに気づいたいくつかの法則をまとめました。LPのコツその1LPは通常のホームページよりも、より一層、漫画のように、絵で追って閲覧者をスッと納得させられる流れを目指しています。原稿をもらったら一旦通して読み、テキストが多いな、と感じた部分はそれを図式化します。明確にする為のヒアリングホームページを作る「目的」を明確にすることがホームページ制作の第一歩。「リピート客への情報提供?」お客様によって目的は様々です。目的が違えば使用する道具もまた異なります。ホームページを作るべきか)を考えるため、まずは現状のヒアリングをしっかりとさせていただくところから始めます。-紙に一旦書き出して、図に出来ないか整理します。「なぜホームページをリニューアルされたいのですか?」をQ&Aのような大きな問いかけにできないか?と考えました。「リピート客への情報提供?」をアイコンのように扱えないかと思いました。LPのコツその2フォントサイズのジャンプ率が大きい分、余白も広めに。見えるように、地と文字とのマージンを30pxにしています(通常のページでは10px程度が多いです)こちらは20pxLPのコツその3LPに限りませんが、図が多くて色がバラバラになりやすいのでカラーパレットをつくっておく。探していて、使いやすかったカラーパレットツールは「カラースキームデザイナー」です。ここに行くとページ左半分に大きい虹色の色相環が確認できます。いう所があるのでそこにメインカラーを「ff0000」のように入力します。大きい円盤の上に小さい円盤が6つ横並びになっています。それをクリックすると自動生成されたカラーパレットが6種類見られます。gR2VZguFkaRm女性を切り抜いて他の背景と合成したいけど、髪の毛の所をどうしよう...そんな時の方法です。ホームページ制作だけではなくDTPにも使えます。この方法はなるべく解像度の高いきれいなデータの方が上手くいきます。小さいのしかない場合は、消しゴムブラシを不透明度50%くらいにして、すこーしずつ、髪の毛の隙間をちまちまと消していくしかないです。2950px×2040pxのサイズでためしてみます。下のレイヤーに色を敷いておくと後で切り抜き具合を確認しやすいです。(ここでは水色のレイヤーを敷いています)ペンツールでパスをかきます。体の線は通常通りに、髪の毛はおおざっぱに周りを囲います。おおざっぱに不要な背景を消した所。調整」ウィンドウを出します。「境界線を調整」ウィンドウの左の方にブラシマークがあります。ブラシツールの要領で、髪の毛の輪郭あたりを塗っていきます。OKを押すと、選択範囲ができています。この選択範囲を使用して、deleteしてみます。(選択範囲が人物になっている時もあるので、その時は背景を選択するように反転させます。gR2VZguFkaRmトップページのデザインは、ディレクターから承った参考サイトに沿って色や雰囲気を決めています。それ以外でホームページ制作で参考にしているサイトについて書きます。下層ページは、トップページのデザインを引き継ぎますが、トップページには出てこない図表などの見やすさに別途工夫が必要です。「ご予約の流れ」ページを作るとします。google検索で、検索枠に「ご予約の流れ」と入れます。デフォルトは「ウェブ検索」ですが、ブラウザの上の方に画像、地図、ショッピング...などが選択できるようになっています。隣の「画像」をクリックしますと他で作られているデザインが出てきますので、いくつか見て一番分かりやすいのを参考にさせていただいています。以下はそれをもとに作った図です。「お客様の声」と画像検索して、結果を参考にして作ったお客様のご感想欄です。無彩色のデザインは、実は一番難易度が高いです。そんな時はこちらを見て行きます。白いサイトデザインhttp://www.web-mihon.com/category/color/09/テーブルも色や線次第で色々と格好良くできます。http://icant.co.uk/csstablegallery/tables/89.phpでは、配色や雰囲気の点で「ギリシャ風」「ベトナム風」「エジプト風」などのテーマにしたい場合はどうでしょうか。私は、レストランに行った時にそこに置いてあるフライヤーやショップカードを集めています。デザイナーになる前からそういう物が好きでした。お店の調度品を撮らせてもらう事もあります。これは趣味の範囲になってしまいますが、木畑亭というイタリアンレストランにて(撮影許可済)。ようにして使う事ができます。自分の資料がない場合は、その国の観光局サイトや民族衣装を検索して配色をつかんでいます。gR2VZguFkaRm自然に見える配色と、人工的に見える配色について説明します。◎ナチュラルハーモニー=ナチュラルな配色。暖色系の色は明度を高くし、寒色系の色は明度を低くすることで自然な色を演出できます。暗い色は青みよりの暗い色にすると自然な印象になります。暖色系の色は明度を低くし、寒色系の色は明度を高くすることで不自然な色を演出できます。暗い色を黄みの明るい色にすると不自然な印象になります。基本的には鮮やかな色をぶつけあうと、人工的でぎらぎらとした刺激のある色になります。上記の二つを表現したいときはこのような鮮やかな色の使いすぎは極力さけたほうが良いでしょう。テーマにホームページ制作をする際には当てはまります。そのときは、100%鮮やかにすることをおすすめします。gR2VZguFkaRmスタイリッシュな配色スタイリッシュとはハイセンスという意味になります。余白を多めにとる・寒色をベースに色数を少なくしてシンプルにまとめる。するとスタイリッシュな配色に近づけることが出来ます。●スタイリッシュのイメージとは無彩色で無機質を演出し、寒色のグレイッシュ・トーンを基調にまとめるとスタイリッシュを表現できます。色の数を最小限に抑えれば抑えるほど、スタイリッシュ感が出ます。透明感のある色を高明度・中彩度でまとめると、都会かつ清楚な印象になります。明るいトーンの同一色相でまとめるとクールさをイメージさせる配色となります。※人工的で無機質な感じを表現することがスタイリッシュな配色になるので、基本的にはワンポイントでも暖色が入るとイメージが変わってきてしまいます。gR2VZguFkaRmデザイナーは制作物一つ一つの形や色、配置の理由を説明できなくてはなりません。説明する時に、合意が得られなかった場合、どうしたら良いでしょうか。それを打開するためにどのような用意をしたら良いでしょうか。弊社のアートディレクターに指南して頂きました。色彩については例えばお客様が非常にビビッドなピンク色をお好みで、それが企業方針や雰囲気に全く合わなかったとします。そんな時、平易な色彩学の本を一冊持っていると説明がしやすくなります。分かりやすいのはお客様が目指されている他の「素敵な」コーポレートサイトを準備し、それと現状との違いに気づくようにご相談をすることです。児童のアニメだったり)もご提示します。デザイナー側もお客様側も、「そうか、今回は合わないからこれはやめた方が良いかも...」と納得行く方向に落ち着くと思います。それでも合意できない場合は、諦めれば良い訳です。ホームページ制作を始める前に、私は他のやっていること、つまり参考サイト(目的と同じ業種や同じ色調のサイトの事)を5個位よくみてから作っています。gR2VZguFkaRmWeb制作でデザイン担当者がSEOを意識した場合、できることについてです。・スライスの書き出し品質は抑え目に。jpg80以下にする。(離脱率を下げ、クリック率を上げるため。クリック回数=SEO上昇)・トップページにSNSが複数リンクされているデザインはNGseo狙いでフェイスブック、アメブロ、twitterなど複数のsnsをたくさん不自然に連動するのはペナルティになりやすいです。アメブロは商用利用不可になったそうです。plusひとつに絞ること。・下層ディレクトリの名前をローマ字にする。英語じゃなく、読みを日本語にする。...・一つのドメイン内で、内部リンクが出来るような文章にするとSEOが強化されます(Wikipediaのようなイメージ)・10年前に作ったキャンペーンサイトなどは、放置しておくと他に悪く影響します。要らないものは消しましょう。