Webデザイン | 沖縄のWebデザイナーChopstickBrunch

29 WAYS TO STAY CREATIVE from TO-FU on Vimeo.

はてなブックマークのホットエントリーに素敵なものがあったので、貼り付け。

1 Make lists
リストを作る

2 Carry a notebook everywhere
ノートを持ち歩く

3 Try free writing
フリーライティングに挑戦しよう

4 Get away from the computer
コンピューターから離れよう

5 Quit beating yourself up
自分を打ちのめそう

6 Take breaks
休憩しましょう

7 Sing in the shower
シャワーを浴びながら歌ってみよう

8 Drink coffee
コーヒーを飲もう

9 Listen to new music
新しい音楽を聴こう

10 Be open
オープンでいよう

11 Surround yourself with creative people
クリエイティブな人たちに囲まれよう

12 Get Feedback
反応を得よう

13 Collaborate
コラボレートしよう

14 Don’t give up
あきらめないで！

15 Practice, practice, practice
練習・練習・練習

16 Allow yourself to make mistakes
自分の失敗を許そう

17 Go somewhere new
どこか新しいところへ行ってみよう

18 Count your blessings
自分の天恵（幸せ）を数えよう

19 Get lots of rest
多く休もう

20 Take risks
リスクを取ろう

21 Break the rules
ルールを破る

22 Don’t force it
力まかせでやらない

23 Read a page of the dictionary
辞書を読んでみる

24 Create a framework
枠組みを作ろう

25 Stop trying to be someone else’s perfect
誰かのように完璧なになろうなんてやめよう

26 Got an idea, write it down
アイデアが浮かんだらすぐに書いておこう

27 Clean your workspace
仕事場を掃除

28 Have fun
楽しもう

29 Finish something
やり遂げよう

まず、JPEGというものについて、e-wordから。

http://e-words.jp/w/JPEG.html

静止画像データの圧縮方式の一つ。ISOにより設置された専門家組織の名称がそのまま使われている。圧縮の 際に、若干の画質劣化を許容する(一部のデータを切り捨てる)方式と、まったく劣化のない方式を選ぶことができ、許容する場合はどの程度劣化させるかを指 定することができる。方式によりばらつきはあるが、圧縮率はおおむね1/10～1/100程度。写真などの自然画の圧縮には効果的だが、コンピュータグラフィックスには向かない。JPEG画像をつなぎ合わせて動画にした方式をMotion-JPEGという。なお、JPEGはGIFと異なり、どこの会社にも特許などの使用料を払う必要がない画像形式だとされていたが、2002年7月にForgent社が突然特許権の保持を宣言し(いわゆるサブマリン特許)、使用料の請求を開始して論議を呼んだ。

とまあ、小難しいハナシではあるんですが、画質を若干劣化させて圧縮する静止画像フォーマットという事で、写真なんかに利用されます。

Webデザインでグラデーションなんかを使うときは、JPEGかPNGを使いますが、このJPEGって8ピクセルごとにブロックわけされて圧縮されるので、8の倍数のサイズにすると良いんです。
※本当はもうちょっと細かい話なんですが、ザックリとね。

というわけで実例です。

こちらは8の倍数で切り出したグラデーションの画像（80 x 320）

そして、8の倍数から1ピクセル大きくした画像（81 x 321）

微妙ですけど、後者のほうがグラデーションが荒いんですねー。

また、圧縮を8pixel正方で行うので、81×321のJPEG画像の容量は、88x328と同じです。

単体ではさほど差は出ませんが、たとえば大量の画像をタイル状に並べるときなんかは、8の倍数を意識すると良いかもしれないですね。

CSSでbackgroundをリピートして設定するときも、8の倍数で切り出すと軽くて綺麗です。

という小難しいお話でした。

Webサイトを作っていると、写真を写真としてちょっとだけリアルに見せる装飾の手法として、影をつけたりします。ありふれた手法で、Photoshopのレイヤー効果にドロップシャドウというのがあって、これで手軽にかけることができますが、素人がやるとやたら派手になりがち。

これ、長方形のオブジェクトに効果をつけているので、角が途切れます。

ので、この手法を取るときは、写真の下に角が丸い長方形を置いて、それにドロップシャドウをかけます。

こんな感じ

さて、これではWebデザイナーのブログとしてはあんまり有益じゃないので、別の手法を考えてみました。

モリサワという書体（フォント）メーカーの、フォークという書体が、けっこう最近になって売れっ子です。

先日、「マイレージマイライフ」というジョージクルーニー主演の映画をDVDで見たんですが、これの「本編再生」「字幕・音声メニュー」なんかのタイトルメニュー画面でも使われていて、あっと気付いたんですけど、街を走っていると歯医者さんの看板なんかにも使われていますね。チラシやポスターにもチラホラ。

ゴシック体なんですが、いい具合の「ハネ」があって、明朝体とも解釈できそうな、独特の雰囲気。

それでいて、けっこう視認性が良いというか、可読性の良いユニバーサルフォントのノウハウも入っていて、使いやすいです。明るい雰囲気のデザインにもってこいです。普通に使うときは、若干ツメたほうがいいですね。

ふと立ち読みしたインテリア関連のムック本で、安い家具でかっこいい部屋を作る！的なコーナーの見出しです。

で、紹介されている家具は、デザインされていないどころか、とてもシンプルでバランスのとれたデザインのチェストだったりソファーだったり、センターテーブルだったりでした。

ああ、真四角だったり真ん丸だったりすると、「デザインされていない」という事になってしまうのか。
何色も色を使ったり、ウネウネとしたフォルムだったり、柄が入っていたりすると、「デザインされたもの」なのか。
では、ソフトバンクのロゴはデザインされていないのか。

だいぶ前ですが、Webサイトのタイトルロゴタイプを作って提出したときに、「え、ただの文字じゃないか、なんかこうもっとこう、デザイン性が欲しい」と言われたことがあります。
最終的にOKが出たのは、サンセリフ体の細いフォントと、太いフォントを組み合わせたものでした。

デザイン性ってなんなんでしょう。

このロゴタイプも、クライアントが世間からどういうイメージを持たれたいのか、どう表現すれば最適なのかを考えて考えた末に、フォントを選び、ちょっとだけ太らせて、最適な余白を取ってバランスを取って配置したものだったんです。

何がいけなかったんだろうか。ずぅーっと疑問だったんです。

それで、4月にＴポイントMESH応援プロジェクトを制作したときに、CCC様からTポイントのロゴマークの使用規定書（Tポイントのロゴは佐藤可士和さん作）をお借りしたんですが、フォントの指定だとか余白の指定、同時に使用する表現の指定なんかが細かく書かれていて、ブランドイメージにブレが無いように考慮されている事を感じました。

今考えると、あのときのロゴタイプはちょっと浅はかだったなぁと思うわけです。

文字間隔の取り方とか、もっと詰めて考えて提案していたら、一発OKが出ていたんじゃないかと思えて仕方ありません。（まぁ、ロゴデザインの料金は入っていなかったのでそこまで時間取れませんでしたが…）

ちなみにそのロゴタイプ、いまもWebサイトでも、TVCMで使われてます。感慨深いなぁ。。。

このブログ経由だと思うんですが、Chopstickのお問い合わせフォームから、Webデザイナー志望の方から応募があります。

おかげさまで、たくさんのお仕事をさせていただいて忙しい身ですから、猫の手も借りたいくらいで、実際にたまに妹（学生）の手を借りたりもします。とはいえ、うちはまだ個人事務所で、社会保険も雇用保険も労災もありませんから、就職するには不適だと思います。誰かを本気で雇って養うほどの規模ではありませんので。

ですが、Webデザイナー志望の方々は応援したいと思っているので、ポートフォリオなどを見せていただいたら、ものすごい辛口な批評をしたりしてます。むしろ、やる気を削いでいないか心配になります。

それでちょっと感じたんですが、Webデザイン初心者の方って、グラデーションとドロップシャドウがどうも派手なんですね。

全体的なレイアウトなんかはセオリー通りやっていて、色の選び方もまともというか素敵だったりするんですが、そのあたりは書籍だとか、スクールだとかで教えてもらえるんだと思います。

たとえば、サイトの上部にあるメニューなんか、こういう感じが多いです。

ちなみにPhotoshopで作りました。

これちょっとまぶしくないですか？何を表現しているのかも不明確ですし、平面に対する文字のZ軸がよくわかりません。手前に浮いてて、光は左上から差してるんでしょうか。それもかなり強い光が。

という風に見えてしまいます。

カッコイイとかダサイとか、そういう次元ではなくて、どうも不自然なんですね。

実際にデザインするときは、もっとちゃんと凝りますけど、同じ色を使って普通に作るとこんな感じ。

文字の位置も、フォントも一緒です。文字を読みやすくするために、ちょっとだけシャドウつけています。質感を出す意味で、すこーしだけ斜めのパターンも入ってます。
我ながら地味で普通ですけど、こういうデザインが普通のサイトでは求められるのかと思います。堅い系の職種のサイトですね。

Webデザイン初心者の方は、もうちょっと全体に地味にしてみましょう。一度グラデーションとシャドウを一切使わないデザインとかやってみるといいかもしれないです。

というわけで求職中の方、ポートフォリオをお見せいただけたら、指導まではいかないかもしれませんが、ツッコミはいっぱい入れますので、試しに送ってみてくださいませ。

お仕事に結びつくかはわかりませんが、趣味の範囲でお答えします。

最近、自社運営サイトのレンタルサーバをhetemlに乗り換えました。

CMSの検証とか色々やるので、データベースが沢山作れるのは良いですね。

さて、hetemlに限らず、SSHが使えるサーバにCMSをインストールする時の簡単な方法をご紹介します。

サーバエンジニアの方が見たら、「なにいってんの？」という感じかもしれませんが、たとえばMovableTypeなんかをインストールしようとすると、4000ファイルくらいアップロードしないといけません。

FCKEditorとか、TinyMCEなんかのプラグインもファイル数が多いので面倒なんですね。

STEP１

まず、CMS本体をダウンロードして解凍します。

必要なプラグインをpluginsフォルダやmt-staticフォルダに突っ込みます。

そして、全体をZIP形式で圧縮して、mt.zipとか分かりやすくリネームしてください。短いファイル名が吉

STEP2

サーバにアップロードします。FTPでいいんじゃないかと思います。

STEP3

SSHクライアントを起動します。ワタクシはTera Termが好みです。

hetemlの場合、コントロールパネルでSSHを有効にする必要があります。

アドレスは、ssh***.heteml.jp

パスワードは任意のもので、ポートは2222です。

STEP4

まず、該当するファイルの場所を確認

そうすると、webディレクトリ以下のディレクトリ名が一覧表示されるので、今回MTをインストールするディレクトリを確認しましょう。

仮に「chopstick」としますね。

そうすると、mt.zip というファイルが出てくるんじゃないかと。

STEP5

このファイルを解凍します。このコマンドも超簡単

そうすると、ズラーっと解凍されたファイル名が表示されます。これがやたらと気持ちいいんですよね。

終わったら、ログアウトします。

コマンドは

STEP6

FTPクライアントで、mtディレクトリにアクセスして、cgiという拡張子のファイルの属性を「705」に変更。

mt-config.originalというファイルは、「700」にします。

 STEP7

あとは、普通に/mt/ディレクトリにアクセスして、インストールウィザードに従ってください。

とまぁ、こんな感じです。

実は前職のとき、契約しているサーバのSSHアクセス権限はもらっていなかったんですね。

なので、MovableTypeをインストールするときは、お昼休み前にFTPをセットして、4000近いファイルをアップする仕掛けをして離席したりしてました（笑）

サーバエンジニアでは無いので、そんなにゴリゴリとSSHを触れる必要は無いと思いますけど、あのストレスから解放されたいという方は一度お試しあれ。

ところで、「サーバー」と「サーバ」ってどっちが正しいんでしたっけ？

コーダーは毎日使っていると言っても過言ではない、説明不要のAnother HTML-lint gatewayですが、
いちいちサイトを開いてURLをコピー＆ペーストするのが面倒じゃないですか？

既出かもしれませんが、便利なブックマークレットがあります。

コチラ↓

こちらをドラッグしてブックマークしてもOK→LINT

もう、手放せませぬ。

あ、クリックすると、このページをチェックすることになりますけど、点数は気にしないでください。（笑）

Chopstickは、基本的に95点以上でサイトを作ってますが、ブログは空白行とか「甘え」が出ちゃいますからね。