2014年8月17日 Webサイト制作, 便利ツール Webサイト制作の準備編2:Webサイトの構成図(サイトマップ)。どのページがどこへリンクするのか、ページの重要度など、Webサイトの構成を図にまとめておくと製作途中で変更があった場合でも整理しやすくなります。Webサイトの構成図を作るときのポイントと便利なオンラインツールをまとめてみました。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その2 目標:Webサイトの構成を明確にする 必要なもの:紙とペン 対象レベル:超初心者OK! 目次 誰のため?何のため?Webサイトを作り始める前に。 Webサイトの構成図を簡単に作れる便利ツール ←今ここ Webサイト設計図 – ワイヤーフレームの作り方 PhotoshopでWebサイトのデザインをしよう Photoshopでスライスし、パーツ画像を作成するコツと方法
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 最近見積りを作る機会が多く、「フリーランスのための全国Webサイト制作料金表まとめ25個」というまとめ記事をたまたま見ていて、Web制作における見積もりの適正価格と算出方法というものについて考えていました。 Web制作業界はフリーランスの方も多く、価格もそれぞれかなりの差があり、何を持ってして適正価格なのかもよく分からなくなってきています。見積もりの算出方法も異なります。 価格のばらつきもさることながら、Webサイト制作は実際にものがあるわけではなく、無形の状態から完全にオリジナルで作るわけで、お金を出して依頼する方も不安はあるかと思います。 結局、費用に対して割りにあった成果物があれば、依頼者は文句ないわけですが、見積もり段階ではどんなものが出来るのか頭の中にあるだけなので、見積もりが適正なのかも判断
±0はとてもよく出来たサイトだけど、英語の使い方が複雑で、ユーザを混乱させる要因になっている。英語と日本語が混在している箇所があったかと思えば、英語だけ、または日本語だけのところもある。 1. 同じページで英語と日本語を混在させない 英語圏のほとんどの人々はシステムに日本語をインストールしていないので、日本語のテキストは文字化けされてみえてしまう。加えて、情報量の少ないサイトを除いては、ひとつのページに2つの言語で情報をバランスよく表示させることは難しいし、自分の言語以外は読む人にとって視覚的なノイズにしかならない。 インターナショナルな閲覧者を考慮してサイトに英語を散りばめているのかもしれないが、多くの場合、逆にユーザを混乱させることになる。デベロッパにとっても、単に2つ目のサイトをメンテナンスするよりもつらいことになるかもしれない。 2.コンテンツはミラーリングがおすすめ。 ただし、そ
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた!そろそろ手がが疲れてきていませんか? そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります! Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います! DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
OpenUMプロジェクトは、行政サービス関連標準メニュー体系「ユニバーサルメニュー(Universal Menu = UM)」の普及を通して、自治体サイトに関する「利用者」「自治体」「Web制作者」の3者を結ぶことを目指しています。 OpenUMについて OpenUMプロジェクトメンバーが調査した自治体サイトに関する調査結果や海外事例、最新のネット業界動向などを随時公開していきます。 調査データ・関連リンク 「ユニバーサルメニュー(UM)」は、市区町村等自治体による身近な行政サービスの情報を、誰もが簡単に検索・活用できるように設計した行政サービス関連標準メニュー体系です。 UMは、NPO団体アスコエが開発し、一般社団法人ユニバーサルメニュー普及協会(UM協会)が管理・運営しています。 UMのサンプルをダウンロードできます。 ユニバーサルメニュー
iPhoneに始まり、さらにここ数年で様々なAndroidケータイが登場し、日本でもスマートフォンが普及し始めています。それにともない、企業サイトやECサイトを、スマートフォンブラウザーで利用するユーザが着実に増えてきています。世界規模でいえば、2012年頃にはスマートフォンの販売台数がPCを超えるという予測もあります(ITU, Mark Lipacis, Morgan Stanley Research.2009 資料PDF )。これはビジネス的に考えて、「まだ様子を見て、対応しなくてもよい」とはいえない状況でしょう。そこで、本連載では「スマートフォン時代のWebサイト制作」をテーマに、スマートフォン対応に必要となる考え方、Dreamweaverを使ったスマートフォン対応のテクニックなどを解説していきます。第1回目となる今回は、スマートフォン対応サイトを制作する前段階について考えてみましょ
最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな?と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね(会社が買ってくれるならいいですw)。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え?何それ」みたいなのがあるかもです。 今回は各種
ジェイソン・コーエン氏が6月に公開したA/Bテストに関する記事は、もっと注目を集めていいし、もっと詳しく掘り下げられるべきだ。オンラインマーケティングの世界にいる人間ならたいてい、クリックスルー率、会員登録率、コンバージョン率などを改善できるA/Bテストの威力を知っている。ページを訪問した人が望ましいアクションを起こす割合を高められるというのは、すばらしいことだ。 しかし、テストの仮説を立ててから、立案、開発、実行へと至るプロセスには、危険が満ちている。そして、いちばん目立たないが最も油断ならない落とし穴の1つが、実はテストの対象として何を選択するかなんだ。 グラフで見る「極小値」問題 ランディングページの各要素をテストするというのは確かに面白いし、やる価値がある場合もある。しかし、ランディングページや製品ができたばかりの段階では、適切でないことが多い。実際に、上の図にあるように、グラフに
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を(触り程度だけでも)理解する HTM
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは? 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは? 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか? 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く