ホームページ制作 岐阜、名古屋 - ノーブレークスペース

最近お客様のデザインのご要望として「シンプルにしてほしい」ということをよく聞きます。

数年前の傾向はとにかくフラッシュで動きをつけて、というものが大半でしたが移り変わりは早いですね。

やはりその要因にはGoogleやyoutubeなど人気サイトが軒並み無駄を省いたシンプルなデザインになっている、というのが挙げられるでしょう。

そこでそんなシンプルなデザインを集めたサイト集をご紹介します。


Minimal Sites

ツイッターをホームページやブログで表示させるにはログイン後のホーム右下の「素材」というわかりにくい場所にあるリンクをたどっていくとできます。




がいろいろめんどうなので以下のタグのアカウント部分を自分のアカウント名に変えて、ホームページやブログに貼り付けてもらえれば、表示されます。

XHTMLでホームページを作る際に必要不可欠なのがこの【div】というタグですが、いまいちなんなのか良くわからないという方に、ご説明させていただきます。

実際僕もXHTMLでコーディングを始めた際は、いまいちこのタグの意味をよく理解できていませんでした。

<div></div>で挟んでもなにが変るわけでもないので。

まぁ簡単に言えば【箱】です。

ちらばってるおもちゃを一度に移動するには箱に入れるのがてっとり早いですよね。

そんな感じでdivという箱に入れると、箱に入れたものを一度に左に移動させたり、背景を赤にできたり、文字の色を変えたりできるのです。

こう書くと【table】タグを同じような働き、といえるかもしれません。

ちなみにdivとはdivisionの略だそうです。

CMS（自分で更新できるシステム）の利点は、いうまでもなくHTMLの知識がなくてもホームページを更新、ページの追加できることですが、その他にも利点があります。

■ファイルの管理が簡単にできます。
ページ数が増えれば増えるほど、その管理が大変ですが、更新システムならページの表示・非表示から削除やリンク先の変更など、簡単にできます。

■デザインをまるごと変更できます。
更新システムのデータ（文言や画像など）は、データベースというところに保存されます。
データとデザインが別のところで管理されているので、今のデザインを変えたいな、と思ったらいつでもデザインを変えることが可能です。
もちろんすでに保存されているデータはそのまま利用できるので、一度更新システムでホームページを作ってしまえば、その後データの入力し直しなどはしなくてすみます。

■表示をランダムに変えることができる。
任意の部分の表示をランダムに変えることができます。
例えばサイドメニューのバナーやピックアップ商品などを毎回勝手に切り替わるようにできます。そうすることで閲覧者により多くのページを閲覧させることができます。

まだまだ色々とありますが、とにかくCMSは「便利」です。

これからのホームページはどんどんこのような形になっていくでしょう。

CSSを使って画像を透過させると、スワップイメージの時などにわざわざ透過した状態の画像などを用意しなくて済むので便利です。

どんどん新しい機種が発売される携帯業界ですが、それに伴い携帯サイトの需要も高まるばかりです。

しかし携帯サイトはメーカーと機種で表示のされ方がまちまちで全ての機種で同じ表示をさせることはほとんど無理だといっていいくらいです。

Docomo、Au、Softbankのそれぞれの特徴を踏まえて表示を同じようにすることは可能ですが、それが新旧モデルとなるともう確認する術すらありません。

しかしそれを可能にするエミュレーターを発見しました！

P1エミュレータ

◆◆以下抜粋です◆◆

「P1エミュレータ」はdocomo/SoftBank/auの3大携帯キャリアに対応した、携帯サイト検証用の高機能テスター(シミュレーター)です。
「P1エミュレータ」はドコモ(iモード)、ソフトバンク(Yahoo!ケータイ)、au(EZweb)各携帯キャリアの表示差異のみならず、各メーカーから発売されている個々の携帯電話に合わせたサイトチェックを可能にしました。
また、強力なカスタマイズ機能により、オリジナルの仮想携帯端末を設定して必要なチェックだけを行うことも可能なシミュレーターです。

◆◆ここまで◆◆

３キャリアの表示を確認するために全機種購入してしまった僕ですが、もっとはやくこのサイトに出会っていればよかったと思います・・・。

補足として３キャリアそれぞれのエミュレーターをご紹介しておきます。

◆Docomo
　iモードHTMLシミュレータII

◆AU
　OpenwaveR SDK 3.3.1J

◆Softbank
　ウェブコンテンツヴューア

今更という感じですが、お客様から質問があったので、一応書いておきたいと思います。

スタイルシートというのはホームページのデザインを決める指示書みたいなもので、背景色や画像の位置や文字の大きさなどを決める重要なものです。

今では当たり前ですが数年前まではスタイルシートではなく直接HTMLにそれらを書き込んでいました。

スタイルシートの利点は、一発でデザインをがらっと変えることができるということです。

無料のブログなどでいろいろテーマを選べると思いますが、それを可能にしているのがスタイルシートです。

他の利点はSEOに有利とされています。

ホームページ内に余計なコードがないので、検索ロボットがホームページをクロールしやすいのが要因のようです。

ホームページの運営や検索上位表示などを考慮するとスタイルシート(CSS)での制作が好ましいようです。

弊社では制作するすべてのホームページをスタイルシートを使って制作いたします。

こんなことも知らないでホームページ作ってたの？といわれそうですが、最近知ったショートカットを覚え書として書いておきます。

■入力文字を簡単に全角カナにする方法
日本語を入力した後に[F7]キーを押す。

■入力文字を簡単に半角カナにする方法
日本語を入力した後に[F8]キーを押す。
携帯サイトを作るときに便利です。

■入力文字を無変換にするショートカット
日本語を入力後に[F6]キーを押す。

［F6］キーは続けて押すと、先頭の文字から1文字ずつカタカナに変換され、［F7］［F8］キーは、最後の文字から1文字ずつひらがなに変換されます。

もちろん[無変換]キーを押せば早い話ですが、僕の環境はMacにWindowsを入れて、そこで制作しているのでキーボードの挙動が多少Windowsのそれとは違うんです。

===============================

■決まったウィンドウだけプリントスクリーンするには。
[Alt]キーを押しながら[PrintScreen]キーを押す。
→これまで全画面プリントスクリーンしてわざわPhotoshopで切り取ったりしてました・・・

自分的には結構嬉しい発見でした。

スワップイメージとは画像にマウスを当てると、画像が切り替わる良く見かけるあれです。



やり方としてはCSS（スタイルシート）を使ったやり方と、Javascript（ジャバスクリプト）を使ったやり方とあります。
下記のサンプルをそのままコピーして試せます。

■スワップイメージ Javascript

Firefoxでコーディングしてて思い通りにさくさく進んでいるときに、ちらっとIE6でチェックしたらずれている…

なんてことはよくあることです。
これまで僕はハックを使って対処してきたのですが、「条件付コメント」を使うという手があるそうで、いろいろ調べてみました。

条件付きコメントとは、HTMLのコメント用タグのなかに条件を入れて、ブラウザごとにCSSを振りわけたりできる優れものです。
主にIE用の振り分けが可能なのですが、