バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


Webデザインの基本は1px

カテゴリー:デザイン的なところ
なんてことは学校じゃ教えてくれましぇん?? 画素の最小単位=px(ピクセル)ってな訳で、画面上で扱える単位も当然「px指定」が最少単位になってくる訳です。何も画像のサイズ指定値に限らず、ブロック要素の横幅や高さ、余白(マージンやパディング)、インデントの数値指定までも、このpx単位でやってしまえるんですよ。

久しぶりにこのカテゴリーの記事でございますが、年度初めということで気分を新たに、意を新たにして何かに臨むべく今日を迎えられた人も多かったのではなかろうかと思いまして、稚拙ながら一助になれば・・というのと、私自身、今後の自分へのエールの意味で書いておりやす。

近頃は生半可にフリーのデザインテンプレートを使いまわしたりする“自称デザイナー”が多くいらっしゃるもんで、最初から作ってないから細かい設定をやらない・・というかしない・・というか出来ない???
要素の指定値単位も「em」や「%」になってると、単位はそのまんまで、数値だけ弄ってあれやこれやとやってる感じがいたします。

もう一度言いますよ〜! 画面上で扱える最少単位は1pxですよー!!(場合によっては気休めで0.1pxなんて指定したりすることもありますが・・・)
そしてデザインを左右するのも、この「1px」やったりします。1pxの余白1pxのボーダー1pxのブロックの幅の違いや線幅の違いとかっていう、何気ない+1pxや−1pxの操作で全体の印象が変わってくるんです。何か違うな〜って感じた時、クライアントから注文があった時、こんなことを思い出してみると、また自分のデザインワークに幅が出来るかもしれませぬよー!!

ついついフリーのデザインテンプレートを使ってるあなたも、たま〜には自力で、真似てみても良いから、ウェブページのデザイン制作を一から取り掛かってみませう!!そして是非、本当のWeb制作の世界へ足を踏み出そうじゃありませぬか!
0
     | デザイン的なところ | | | pookmark

    最終的なデザイン考案は・・

    カテゴリー:デザイン的なところ
    デザイナーを名乗る以上、自分のものさしで決定しませう!たとえ、デザイナーでなくても、Web制作に携わってて、何らかの形で、部分的にでもデザイン制作をする機会があった場合、自分を信じて自分の力で白地の背景枠から作っていってみてください。フリー素材はあくまで参考に、そのまま流用したりなんかせずに・・是非とも、お願いします〜。

    誰でも、どんな仕事でも最初は素人です。最初からプロフェッショナルではありましぇん!
    私もかつて・・、というか今でもよくイケサイなんかを眺めてはため息をついたりしてますが、ヒントこそもらうものの、結局は自分のひらめきや、創造力を想像する?なんてカッコいいもんじゃなくて、ほんとに絞り出すような感じでWebサイトのデザインを考案してたりします。

    参照:ikesai.com イケサイ ウェブデザイナーのWEBデザインデータベース

    実体は勝手サイトなんですが、“Webサイトデザイン参考まとめサイト”の老舗やったりして、業界の人ほど閲覧者が多かったりするんじゃないでしょか?? ⇒(今って簡単に登録申請できるよになってますね〜!)


    そして時は流れ・・、少〜しコツをつかんで、少〜しだけパリっとデザイン制作をこなしてた頃に、海外のWebサイトと国内のWebサイトとのデザインの違いに悩んだりしたこともありました。

    参照:なぜ日本のWebデザインはダサいのか? by MEMOPATCH

    まぁ、WordPressやMovable Typeのテンプレートサイトのデザインを見る限りでは、私的にはそうとも言えず、日本のWebデザインがすべてダサいんじゃなくて、日本に合ったデザインやというだけのコトで、それをどうとらえるかは、ハッキリ言って主観の問題もあるかと。


    この主観性こそが、デザインの良し悪しを決定する大きなポイントでもあるだけに、自分の主観性=自身のデザイン力、自分でデザイン制作をせずして何をするものぞ、とな!
    0
       | デザイン的なところ | | | pookmark

      そもそもデザインとは・・

      カテゴリー:デザイン的なところ
      ということを最近よく考えてしまいます。Webページに限って言えば、限定的にWebデザインについて触れれば良いはずなんですが、どうもデザイン全般について思うことがあったりする訳です。そもそも論というか何というか・・確かに趣味や芸術とは一線を画した、ビジネスの領域でデザイナーとして飯を食うからには、クライアントの意向を汲んで、依頼されたデザイン制作を行って対価を得ることが仕事になるんですが、その“クライアントの依頼”は最終的には誰のためのものなんやろうってのを熟考せんと、果たして良いデザインなんやろか??ってことになってくるんですね〜。

      参照:「デザイン」という言葉の意味を改めて考えてみる。 by Basic Design Note

      ここのブログ(参照ページ)の最後の方に書かれてる、
      「ただただ制作者の好みや、クライアントの好みに合わせた物を作っても、作り上げたものが「伝えるべき相手に伝わらない」「使うべき人が使いにくい」物になってしまっては、まるで意味が無いんです。」
      という部分、確かにそのとおりやな〜と思ってしまいます。

      語源をたどれば、いろいろと出てきますが、やっぱり他者に情報を伝えやすくするために設計する、「de」+「signが何となくしっくりきますねー。

      参照:デザインてなんだ? by What's Design


      まぁでも正解は1つだけじゃないところがこれまたデザインの面白いところで、難しいところでもあったりします。ある商品パッケージなんかは、最初は<見た目が悪い>なんて酷評されたデザインが、商品がヒットして時間がたつと<あの素晴らしいデザイン>なんて語り継がれたりすることがあるのも事実で、先日[病院・公共施設の標識や案内板]の記事で少し触れたユニバーサルデザインも、じゃ逆に本当に万人にとって公平が保てるデザインって可能なのかと言えば、なかなか難しいんじゃなかろうかとも思ったりする今日この頃です・・・
      0
         | デザイン的なところ | | | pookmark

        頑張れるか? iPhone 4S・・

        カテゴリー:デザイン的なところ
        デザイン的なところのカテゴリーに投稿してしまいしたが、Webデザインではございませんのであしからず。iPhoneでございます。自分が所持する携帯端末が「iPhone 4S」なんですが、そんなに多忙な人でもないので、1日中電話が掛かってこない日もあれば、会社にいた時なんかは、この業界にいながら携帯からメールをすることさえ億劫になることもしょっちゅうやったりで、ディスク容量も最少の16GBを選択して、そのまま現在に至るという訳です。

        で、先日発売になった「iPhone 6」と「6 Plus」。何か料金プランや割引、下取り値引きとかを見てると、今のままよりも月額が安くなりそうな感じが・・・(このままやと、キャリアの心理作戦に見事に落ちそうな感じ・・)
        どうなる??「iPhone 4S」は一体・・実際、iPod代わりに音楽データを詰め込んだ状態やと、はっきりいって容量パンパンなのは事実で、最近はiOSの更新がある度にiTunesに接続して、ものすご〜く長い時間をかけてアップデートをしてたりします。

        そして、使ってるといつの間にか2GBくらいに膨らむ【その他】領域とかいう訳の判らんデータをクリーンアップするために、度々下記の方法で、これまたものすご〜く時間がかかる復元処理をしてたりもします・・・
        iOS 7の小技となってますが、iOS 8でも大丈夫でした!

        参照:やっぱりこれが一番! 容量を圧迫するiPhone内の余計なデータを一番簡単&超効果的にスッキリさせる方法 by iPhoneひとすじ! かみあぷ速報


        ○そう、そして・・わかります!「iPhoneを新しくしたいという欲求は消えません。しかし、現状を考えても4sを使い続けるほうが打倒です。」というご意見!(多分、打倒じゃなくて妥当かな?)

        参考:なぜ「iPhone6」を諦めて「4s」を使い続けることにしたのか by 遊戯王ハック


        ○我慢の限界という方もいらっしゃるようです・・・

        参考:なぜ、僕はiPhone4sをまだ使い続けているのか考えてみた by 真の矢


        「iPhone 4S」>「iPhone 6」「6 Plus」というデザインの優位性に果たしてどれだけの人が気づいてるんやろう?本当に「iPhone 4S」は素晴らしいデザインやと思いますよー!!

        参照:片手で使える名機「iPhone 4s」のデザインが特許を取得! by IT Strike

        参照:【快挙】iPhone4sのデザインが特許を取得! by iPhone Mania

        参考:結局iPhone4Sを使い続けることにしました by 自由世界の独裁者


        今日からダウンロード可能になった新しいOSの「iOS8.1」にもビミョーに対応してる「iPhone 4S」、データ通信の繰り越しとか要らんので、何とか安く、安く、ひたすら安く少しメールが出来て少し電話が出来て、使い続けられる方法を検討し続けたいと思いまする・・。
        0
           | デザイン的なところ | | | pookmark

          病院・公共施設の標識や案内板

          カテゴリー:デザイン的なところ
          このカテゴリーの記事は、これまであまり書いてきませんでした。というか敢えて書きませんでした。というのも、一口に『デザイン』といっても、ごり押しなクライアントの趣味嗜好に合わせて仕事をすることもあれば、末端のユーザーのことを第一に考えて、クライアントを説得しつつ、妥協点をさぐりながらデザイン考案を行うこともあったりするので、「正解」のないクリエイティブワーク、それこそがデザインだと思ってるからでした。

          しかし、やっぱり自分なりの主張というか、こうした方が良いな〜というのはあって、当然、提案時には盛り込んだりするんですが、今回は、一般的なところの話も含んでることなので久しぶりに書いても良きかな〜と。
          で、昨年、自身が入院する以前からかなり気になってて、どこかで誰かに伝えて、共感を得られへんやろか?と思ってたことがあったので、この場を借りて、“自分なりの”を織り交ぜながらお伝えしたいと思います。
          まあ、すでにコレだけ普及してしまえばもう一般的と言わざるをえないので、逆に「あんた、何言うてんの?」的な扱いを受けることを覚悟で敢えて書きます!

          絶対どこかに仕掛け人がいて、便乗するやからがいて波及していったとみてるんですが、こんなんのどこが一体、ユニバーサルデザインなんでしょ。Windows「8」のデザインでもてはやされたメトロUIデザイン(今では「Modern UI」っていうらしいです)と混ぜこぜになってません?? 

          参照:ユニバーサルデザイン by Wikipedia

          参照:Modern UI by Wikipedia

          駅や病院、福祉施設、新しい建物になればなるほど顕著ですな。まぁ、見難い、判りにくい、私でさえこんな感じやったら、もっと年輩の方にしてみたら・・・本当に何を考えてるんやろう。発注側もうまく言いくるめられたんやろか。

          見難い例例えば病院の「イメージカラー」、解りますよー!少なからず、デザインの仕事してますんで。しかーし!淡〜い水色やピンクの背景板に白抜きや淡い色目のゴシック体の文字で「←消化器内科」って書かれても・・実際、見にくいよ〜!いくらゴシック体やからええやろゆーても、めっちゃ細いヒョロロロ〜っていうもやしっ子みたいな字体になってるし・・

          写真は素材集のデータから切り取ったものであんまり“見難い例”にはなってませんが・・(むしろ少しコントラストついてるくらいでちょいと良い感じですが)


          他の施設でもオレンジ色の背景にこれまた白抜きの細〜いゴシック体の文字の案内版・・何なんでしょか。私自身、色弱なので非っ常に腹立たしい限りです。コントラストっちゅうもんを知らんのか〜??点字看板や音声案内装置を設置してたらええと思てるそこの担当者、責任者、設計・デザイン担当者さん、も一回、ちゃんと利用者の立場になって勉強し直しなはれー!

          そう言えば、高速道路の標識とかも段々新しくなる度に背景色が薄くなっていってるのは気のせいか知らん・・(えっ!?排気ガスで黒ずんだり雨ざらしで塗装が剥がれたりしたのを新調したらそう見えるだけやって??あ、そう??そなのー?何か怪し〜)

          OSをバージョンアップする度にデフォルトの文字が細〜くなるスマホ(特にiPhoneを筆頭に・・)の画面表示はまぁ、ギリギリ設定で何とかできるから良しとして。(それでもSMSのメールの文字が見づらいと嘆いてる年輩の方を何人も店頭でよく見かけます・・多分、すぐに設定方法なんてわからんよな〜)

          ホンマに、自分たちの都合や流行りで仕事しなさんなよー、誰のための施設、誰のためのデザインで、詰まるところ誰のために働いて飯を食ってるのかな〜アナタたちはー?入職、入社したばっかりの頃の初心を思い出しなさいよー!!
          一体、デザインとは誰のため、何のためのものですかな?

          **********

          と、そんな積もってた思いが届いたのか、近頃新しく開業した医院(クリニック)や改装後の病院やと、結構濃いめ(茶色やこげ茶色)の背景色に白抜き文字を使ってかなりコントラストを強くしてるプレート表示をよく見るようになりましたなー!
          見やすい例その1見やすい例その2見やすい例その3
          0
             | デザイン的なところ | | | pookmark

            大文字と小文字、テキトーが気になる

            カテゴリー:デザイン的なところ
            あのー、ですね。デザインと言うか、以前[全角と半角、ごっちゃが気になる]という記事でもほざきました文字です。今度は英文字です。今度ばかりは気になるかどうかって話で済まんぞ〜!?
            日本人やからテキトーでよろし??な訳はございません。「わからぬのならば使うな」と言いたいのはヤマヤマですが・・・もうちょっと知っとこう!頑張って覚えといた方が良くないか〜?な話です。
            例えば、仮にアナタの名前が「井上洋子」やった場合、ひらがなで「ぃのうえょぅこ」なんて書かれたら気持ち悪くないですか?今回の問題は英文字なので、例えとしては的を得てましぇんが、一応ルールのようなものがあるんですな、コレが。

            参照:大文字 by Wikipedia

            で、どうしたいか。どうすべきか。どうすればあのよろし・・じゃなくてあかよろし?
            私流の簡単なルールとしては以下のとおりを推奨いたしたく・・・どうでしょう?


            ■英語表記の大文字と小文字の区別

            ・固有名詞(国名・地名・人名・社名など)は先頭文字を大文字、またはすべて大文字にする
             →ただし、既存のロゴなどがデザインとして定型ですべて大文字、あるいはすべて小文字の場合はなるべくそれに合わせる
            ・省略形または略語は大文字
             →NG (No Good)、OK (Okay)、GPS (Global Positioning System) など →HTML (HyperText Markup Language)、CSS (Cascading Style Sheets)、HP (Home Page)、IE (Internet Explorer) など ※「WEB」は略語ではないので正しくは「Web」または「web」

            ・行頭は大文字
             ※メールや提案書の文章の先頭、見出しの先頭では必ず「Web」
            0
               | デザイン的なところ | | | pookmark

              全角と半角、ごっちゃが気になる

              カテゴリー:デザイン的なところ
              あのー、ですね。デザインと言うか、文字です。文字の体裁。気になるかどうかって話で済むんかな〜。
              個人的にはちょいイラついてしまうのであります。むしろ制作側なら気にせなアカンのちゃうの?何も思わんよーな人が制作すなよ〜〜お願いです。。
              現にクライアントから指摘もあったりするんですよ、統一感や整合性。たかが文字ではないんですよ!

              例えばこんなの・・
              全角と半角、ごっちゃですが。

              と、実際どうなんでしょ。気にならないんでしょか。どーでも良いんでしょか。結局その人の人間性でしょうか。

              0
                 | デザイン的なところ | | | pookmark

                Button of Go to Home

                Button of Back to Top