logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
050-3184-0915

MENU

2015 4月

お見積り依頼

デザインについて考えてみる

スキュアモーフィックデザインとリッチデザイン

スキュアモーフィックデザインとは、主にコンピュータシステムのユーザーインターフェイスに使われる、実物に似た質感の再現を目指したリアルなデザインのことを言います。立体感や奥行、質感、光沢感の演出といった要素を取り込んで細部までデザインされているので、作りこまれた華美なデザインということができます。写実的なのが特長です。一方でリッチデザインとは、斜角や反射、ドロップシャドウ、傾斜などの飾りを加えたデザインのスタイルを指します。対象を立体的に見せることで、ウェブサイトを移動しているユーザーや、アプリを利用しているユーザーの使いやすさを考慮して用いられることが多くあります。似ているようで非なるこの二つのデザインと対をなすのが、次に紹介するデザインです。

フラットデザインとは

2013年頃より、それまで主流であったリッチデザインに変わり、フラットデザインが好まれるようになりました。原因としてはWindows8のOSに導入されたこと、AppleがiOS7に採用したこと、Googleのデザインにも取り入れられていることが挙げられます。が、一番の理由は、作成の手間がリッチデザインに比べると少ないというところにあるようです。そのうえ、ウェブに接続するためのデバイスが増えたためスクリーンサイズが多様になり、さらにブラウザーそのものの制約もあり、せっかく作ったリッチデザインを、モバイルサイズに合わせて縮小する際、うまく変換することができないといったことも理由の一つといわれています。これに対して、フラットデザインは余計な要素がないために、ウェブサイトの読み込みもスピーディーになり、サイズも変更しやすくなっているのです。ただ、欠点があるとすれば、デザインにセンスが必要になってきたということです。シンプルで平坦なデザインのため、色の使い方や配置などが重要となるからです。もしも苦手とするのであれば、コーディング代行といったプロの手を借りるのも、手段のひとつです。

続きを読む

多様化するデバイスでのレスポンシブコーディングを考える

「パソコンだけじゃないインターネット利用」

総務省の調べによると、平成24年末のインターネット利用者数は9,652万人、人口普及率は79.5%になっています。端末別のインターネット利用状況を見ると、自宅などのパソコンからインターネットを利用している割合は93.6%、携帯電話が42.8%、スマートフォンが31.4%となっています。つまりWebサイトを作る場合、ユーザーがどのメディアを使って閲覧しているかを考慮しなくてはならないのです。パソコンの画面とスマートフォンの画面ではそもそも縦と横の対比が違うので、それぞれのブレイクポイントも違ってくるのです。

ブレイクポイントとは

レイアウトに応じて画面サイズが切り替わるポイントを指します。あらゆるデバイスに対応できるようレスポンシブウェブデザインを施すことがレスポンシブコーディングなのですが、デバイスが多様すぎて、あらゆるデバイスに対応しきれていないのが現状です。なぜならデスクトップパソコンのモニター、タブレットにモバイルと、様々なサイズのデバイスが存在しているからです。これまでのWeb制作では、デスクトップの場合はアクセス解析の結果で、よく見られている画面サイズを分析し、モバイルの場合は横幅240pxが主流、などの明確な指針があったので、それに合わせたデザインを行えばよかったのですが、いまでは通用しなくなってきています。また、サイトの内容によってもブレイクポイントは変わってくるでしょう。

モバイルファーストの考え方

それでもレスポンシブウェブデザインを考えるとしたら、パソコンなどの大画面を基準にするのではなく、モバイルでの閲覧を基準にしてポイントを考えてから、大画面ブラウザに見やすいポイントを設定する方法があります。この場合でも、そもそもモバイル同士のポイントが微妙に異なってくるため、作業する人間としては非常に頭を悩ませることとなります。

続きを読む

CSS3の特徴と新しい仕様

CSSとは

CSSとはCascading Style Sheetsの略で、WWWで使われる各種技術の標準化を推奨するW3Cが策定・勧告するもので、HTML文書の文字色などの装飾を定義する仕様です。それまではHTMLが全てを担っていた文書の構造と装飾を、文書はHTMLに装飾はCSSに分担させるという理念で提唱されました。

続きを読む

知っておきたいHTML5についての基礎知識

HTML5とは

昨今Webデザイナー界隈で話題となっているHTML5について簡単に説明していきます。HTML5とはウェブ上の文章を記述する言語、HTML(ハイパー・テキスト・マークアップ・ランゲージ)の第5版です。

人間とコンピューターの双方が矛盾なく読み解ける言語を目指して作られていて、現在広く使われているHTML4.01との大きな違いは、マルチメディアへの対応と文章要素の明確化と追加です。

続きを読む

CSSの歴史

CSS(Cascading Style Sheets)の始まり

1989年にHTML(HyperText Markup Language)が誕生しましたが、HTMLは元々情報管理が目的で作られたものです。1996年、文書はHTML、デザインはCSSという役割分担をしようと、W3C(WWWで使用される各種技術の標準化を推進する為に設立された非営利団体)により勧告されました。HTMLで出来るデザインの大部分に加え、新たな機能を備えます。1994年にCERN(欧州原子核研究機構)に勤務するホーコン・ウィウム・リー氏によって提唱されました。 HTMLでも簡単な装飾は可能でしたが、デザイン装飾の機能を専門に扱うことでより高度な技術を実現できるようになり、便利さが増しています。

続きを読む

HTMLの歴史

HTML(HyperText Markup Language)の始まり

HyperText Markup Language(ハイパーテキストマークアップランゲージ)は、ウェブ上の文書を記述するためのマークアップ言語で、ウェブの基幹的役割を持つ技術の一つです。その歴史は1989年に始まり、CERN(欧州素粒子物理学研究所)のティム・バーナーズ=リー氏が開発しました。現在はWHATWG(HTMLの開発やその関連技術に興味を持つ人々のコミュニティ)によって仕様が作られ、それを元にW3C(WWWで使用される各種技術の標準化を推進する為に設立された非営利団体)によって勧告が為されるという流れになっています。

続きを読む

レスポンシブコーディングについての基礎知識

レスポンシブデザインとは

レスポンシブデザインが流行し始めてから数年が経ちますが、web制作に関わる人間以外には、まだ馴染みの薄い言葉かもしれません。今回は初心者に向けた説明をしていきましょう。

続きを読む