フロントエンドエンジニア・うぇびんのよしなし語り
CMS構築での記事の流し込みには自動インポートだけでなく、手入力での投稿も必ず行います。サーバーとの相性によるエラー、インストール失敗などによる不具合をチェックするためです。
先日公開したa-blog cmsテーマ「site2015mini」のテスト記事の文章は「吾輩は猫である」「セロ弾きのゴーシュ」「賢者の贈り物」の抜粋となっています。
ここ数年はこれらと、50音の羅列200文字分を使っています。今回はダミー素材に関する試行錯誤の話です。
ブログに書きたいことやりたいことが多く困っている、今日この頃です。
メインサイトをリニューアルしました。
基本のデザインは特に変わっていませんが、a-blog cmsで構築したのがもう二年前なので、テーマ構造の見直しと、About・Workのコンテンツを改修しています。 ポイントになるところをいくつかご紹介。
デザイナーの市村さん（@MarlboroLand）による「& lt;a class="blank" href="http://www.kuzuhate.com/?p=440">WebオペレーターのためのWebデザイン勉強会」
市村さんはIrrustratorを使われているので、実際にイラレを操作しながらの説明となりました。
記事中に添付している画像は、私が家で再現したものです。
最近のボタンは高さがどんどん短くなっている
→グローバルナビの役割が小さくなり、コンテンツを見せることを重視するようになった
※記事冒頭のスクリーンショットを参照
原色は避けるべき。色選択はRGBよりHSBの方がいい
90%くらいに落とすとちょうどいい
明度と彩度を保ったまま色だけ変えることができる
ただし緑は彩度、黄色は明度が高すぎるので調整が必要
白→黒のグラデーションはまずない
グラデーションのトーンカーブは全体に柔らかく、いちばん下（濃い部分）のカーブを若干きつめに
→横に回転した時の様子をイメージしてみよう
新ゴ／リュウミンを中心に、モリサワフォントを使うのが無難
（ウェイトを細かく指定できる）
モリサワがないときは、Adobe製品なら小塚ゴシック／明朝があるのでそれで代用
文字のウェイトを細めに、文字を大きめにするとすこしおしゃれに見える
英語のみHelveticaかArialに、文字サイズを若干大きくすると収まりが良くなる
古いバージョンのIllustratorは文字間隔が不安定なので
「イ」「ト」などの隙間が広くなってしまうことがある
一文字ずつの微調整が必要 文字を選択した状態でAlt(option)＋左右キー
PCの原点は左上／文字は左上から読む
…なので、左上を光源にするとバランスがいい
透明度を下げたドロップシャドウをかける
ボタンの縁に明るい境界線を細く引く or 光沢を出してみる
上：白っぽい色
→ 真ん中：基準色
→ 下：彩度を少し高く
下から光っている印象になる
○ ＋ " ＋ >
▲を横に倒す
PhotoShopのオートシェイプに太い矢印があるので調整する手も
※今見ているブログの、右のメニューの矢印を見てみてください＾＾；
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります
横並びのパターンがほぼ主流→誘導リンクの集約
Σ（°Д°; 段組設定知らなかったーーーーーーーー！！
※CS4以降だと上メニューの「編集」→「パス」の中にあります
今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。
レポートは以上です。
「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。
イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。
@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww
北海道にもWeb標準が普及したのか、私がMTやWPを扱っているからか、最近は会社を通したコーディング案件を扱うことが多くなりました。
静的なウェブサイトの場合、大抵はコーディングの時点で中に入る文章が確定していますが、私の場合ブログやレンタルカートや CMSがベースなので、通常テキスト部分に何を書きこまれるのか予想がつきません。
この点を踏まえて、どんな感じで気を付けているのかご紹介します。
熟練のコーダーさんには、今更な内容も多いですが…＾＾；