mediologic.com/weblog » サイトを企画する時に考えたい、４つのポイント。
■サイトを企画する時に考えたい、まず４つのポイント。 Webサイト、特にブランディングサイト、スペシャルサイト、キャンペーンサイトというものを企画する時に気をつけたいこと。 Google勤務時代はさすがにそういう仕事はなかった訳ですが、博報堂、電通、そして今に至るまで、サイトの企画をする際に、気をつけてきたこと、一緒に仕事をするスタッフとシェアしてきたこと、そしてこれから一緒に仕事することがあるかもしれない人々にもシェアしたい、僕の考え方をまとめておきたいと思います。 １）そもそもWEBサイトに人は来ない 僕自身、多数のWEB企画に参加してきたけれども、常にまず第一に念頭におくのは、そもそもサイトに人は来てくれない、ということ。Google時代にその考えはますます強くなった。検索をしてサイトに飛びだつユーザーは、その目的のためにそれぞれを訪れる。SEO/SEM業界でいう［ランディングページ
中小企業のビジネスサイトに効果を与える5つのデザイントレンド
限られた予算と時間の中で、商品の販売、資料請求やダウンロードなどのビジネスサイトのゴールを達成するために効果的なデザイントレンドを紹介します。 5 Small Biz Web Design Trends to Watch 下記は各ポイントを意訳したものです。 はじめに 1. ミニマリスト 2. 独自の写真 3. 大胆なタイポグラフィ 4. アクションの呼びかけボタン 5. A/B テスト はじめに 中小企業のウェブサイトでは、ユーザーの注意を取り込みブラウジングをうながし、あなたのプロダクトあるいはサービスにおける利害関係を起こして、販売へと結びつける必要があります。 限られた時間と予算の中で、少しでも多くの可能性のあるユーザーに興味をもってもらうにはデザインは必須な要素です。 ここに中小企業のウェブサイトに大きな効果を与える5つのデザイントレンドがあります。 1. ミニマリスト Ambl
パンくずのデザイン集と概要やデザインのポイント
ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
文字コード（UTF-8,Shift_JIS,EUC-JP,ISO-2022-JP）についての俺的まとめ - 今日もスミマセン。
「プログラマのための文字コード技術入門」を読んで自分なりに理解した点をザックリとまとめてみる。 それほど正確性を求めて書いているわけではないので、間違ってる可能性大です。 間違いなどあればコメントなど頂けるとありがたいです。 それぞれの文字コードはどう違うのか？ 日本語の文字コードは大きく以下の２つに分けられる JIS X 0208 文字集合をベースにしたもの Unicode文字集合をベースにしたもの JIS X 0208 文字集合をベースにした文字コードには、EUC-JP, Shift_JIS, ISO-2022-JP がある。 Unicode文字集合をベースにした文字コードには、UTF-8, UTF-16 などがある。 上で挙げた「文字コード」とは正確には「エンコーディング（文字符号化方式）」の事を指す。 文字符号化方式 文字集合って？ 読んでそのまんま”文字の種類の集まり”。「キャラ
HTML5になると結局何が変わるの？
約10年ぶりにバージョンが上がるHTML5。 最近HTML5を取り上げた記事も多いですが 結局何が変わるのかよく分からない方もいるかと思います。 そこで、今回はホームページ作成の初心者の方のために HTML5の変更点をなるべくシンプルにまとめてみました！ まず、HTML5では「不要なタグ」が廃止され、 SEO的に重要な「新しいタグ」が増えます。 廃止されるタグには通常CSSで指定しておくべき center、font、uなどが完全に廃止されることになります。 以前から言われてきた 「見た目に関するものはCSSでやりましょう」ということですね。 （当方もまだfontタグなどを使っていますが；） そして新しいタグとして<header>や<footer>など 検索エンジンに対して構造を分かりやすくするタグが増えます。 フッターの部分を表す<footer>や 文章などのコンテンツを入れる<secti
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
かわいい上にハイクオリティなフリーのアイコン集
ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon（有償のアイコンページ）
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
手描き風Webデザイン – 参考サイトや無料のフォント・アイコン・ブラシなど
2014年10月12日 Webデザイン 私の大好きな手描き風Webデザイン！見づらくなったりするのでバランスが難しいデザインではありますが、「普通のデザインじゃ物足りない！」という時に取り入れると、程よくゆる〜い感じがでます。ここでは参考になるWebサイトや、デザインする際に使えそうなフォント・アイコン・ブラシなどを紹介します。 ↑私が10年以上利用している会計ソフト！ 手描き風Webデザイン – 参考サイト 見とれてしまうサイトばかりです。 Christian Sparrow http://www.christiansparrow.com/ ブラン http://www.bla.jp/ BootB http://bootb.com/en/ PSYOP http://www.psyop.tv/ a simple measure http://www.asimplemeasure.com/
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
画像に使用されているフォントの名前が分かるオンラインサービス -What Font is
調べたいフォントがある画像をアップロードします。ファイルはローカルでもオンライン上でも対応しています。 上記は、手元にあるローカルファイルを「Browse」ボタンで参照し、「Continue」ボタンをクリックします。 Step 2
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
サイトで使える500近いフリーのPNGアイコンセット「spirit20」:phpspot開発日誌
Icons 19eighty7 サイトで使える500近いフリーのPNGアイコンセット「spirit20」が公開されています。 ソーシャルサイトなんかですぐに使えそうですね。 同種のアイコンも色々あったりしますが、これはこれで味があっていいですね。 他にも以下のようなソーシャルアイコンが配布されています。 関連エントリ 色々な場面で使えそう！という白黒アイコンセット１２０ ウェブサイトに使えるアイコンセットのまとめサイト
MdN Design｜総合情報サイト
テンプレートにリピート領域が指定されたテーブルを作成しておくと、行の追加削除や入れ替えが簡単に行えるようになる。リピートテーブルを使うことでリピート領域と編集可能領域を同時に作成できる。MX 2004以降で使用可能なテクニックだ。 テンプレートファイルを作成または開き、挿入位置にカーソルを指定する【1】。挿入メニュー→“テンプレートオブジェクト”→“リピートテーブル”を選択。挿入パネルの一般タブ内にあるテンプレートアイコンのプルダウンからも選択可能だ【2】。行、列、開始行、終了行を指定して［OK］ボタンを押す【3】。リピートテーブルが挿入されるのでテンプレートを保存して、このテンプレートから新規ドキュメントを作成する。ドキュメントにリピート領域と編集可能領域が表示され、行の追加削除や入れ替えをするボタンが表示される【4】。なお、テンプレートの編集可能領域にデフォルトの値を記述しておけば、行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無償で商用利用できて品質の高い日本語フォント一覧 - Liner Note
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://www.designwalker.com/2010/06/html5-template.html
ブログ
