頭の中を整理したいときに役立つ！新人Webマーケターが活用すべき、ワークフレーム30選
1：マインドマップ まずは基本中の基本、「マインドマップ」です。放射思考に基づいて考案されたマインドマップは基本テーマとテーマから連想するものを繋げていくフレームワークで、主に思考整理のときに役立ちます。 2：ロジックツリー 後述する「MECE」に深く関係している「ロジックツリー」もフレームワークの代表ですね。Whyツリー（原因追求）やHowツリー（問題解決）など、シーンによって使い分けを行い、解決策や問題の特定を行います。 3：時間管理のマトリックス 物事を緊急性と重要性を使って4つに分類し、優先順位をつけるためのフレームワークが「時間管理のマトリックス」です。自然に頭の中でやっている方も多いフレームワークです。 4：ピラミッド構造 「ピラミッド構造」も基本中の基本といえるフレームワークです。複雑なものを、細かく段階的に分けることで整理する方法です。活用する際は、まず頂点にテーマを置き、
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
[JS]画像を使わずに、テキストをかわいくサークル状に配置するスクリプト -CircleType
幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lettering.js"></script> <script type="text/javascript" src="js/circletype.min.js"></script> FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。 Step 2: HTML HTMLはシンプル
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」:phpspot開発日誌
Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ
【初心者向け】WordPressのローカル開発環境をMacに構築するテンプレ
ようやくリニューアルが一段落付いたので今回やったことを色々備忘録として更新していきます。 リニューアルを行うに当たり、まず行ったのはMacのローカルにWordPressが動作する環境を作る事（要するに普段使ってるパソコン内で動くようにする）。 ブログサービスを利用していたり、公開前のサイトであればサーバー上で直接修正でも良いが、テーマのカスタマイズ等を行うとなるとそうも行かない。 動かないなんてざらだからだ。その他にもローカル環境を作っておくとWordPressのバージョンアップとかテストもしやすいのでメリットは多い。 ぶっちゃけ、SE的観点で言えばテストもしないで本番環境のソースを触るなんて、恐ろしくてできないｗ 必須アプリケーション MAMP WEBサーバー+PHPとDBサーバーがセットになったアプリケーション。 Windowsではxamppが有名だがMacになるとMAMPらしい。 好
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
９．売れるランディングページデザインの１０の特徴
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ランディングページのデザインは、インターネットの技術の向上に合わせて変遷している。それに伴い、高いコンバージョンを見込めるレイアウトも、めまぐるしく変わっている。 しかし、結局、どのビジネスも最終的には似通ったデザイン/レイアウトに落ち着いていく。 なぜなら、結果を出すランディングページデザイン/レイアウトには、ある一定のルールのようなものが存在するからだ。そして、そのルールに則ってランディングページを作ると簡単に高い数字が出せる。 つまり、ゼロからデザインを考えるのではなく、既に結果が出ることが証明されている成果保証済のレイアウトやデザインを使う方が、遥かに簡単で結果が出やすいのだ。 そこで、近年非常に良く見られるランディングページのレ
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
Webフォント・サービス FONTPLUS ｜ ためし書き
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
サイト作成に欠かせないサイトやサービスなどを20個｜Webpark
私がサイトを作る際によくお世話になっているサイトやサービス、フリーソフトを紹介します。個人的に見ているものだけなのでまだまだあると思いますが、ご参考になればうれしいです。 週間ウェブデザイン 次の「あんじょうできてはる」が更新停止になっているのでこちらを。1ページあたりの表示数が多いので探しやすいですね。 あんじょうできてはる Webデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。更新は止まっちゃってますが。。 MephoBox ヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。 ロゴストック 日本を中心にかなりの数のロゴが集められています。管理人さんや訪問者の評価も見ることができて参考になります。 フリーの素材集です。「ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ」もご参
[JS]jQueryのプラグイン33+1選 -2011年2・3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
国内Webサイト参考デザイン一覧集 | Maka-veli.com
ん？タイトルの日本語、なんかおかしい？(笑) 自分用に、国内のWEBサイトサンプル集をメモ。 やっぱ国内のが参考にしやすいですよね。 ズロック http://www.zzrock.net/ 一番お世話になってます。 検索も楽です。 そしてサイト自体のデザインも好きです。 (黒×黒のロゴとかやっちゃうとこがまた良い) iKeSai.com http://www.ikesai.com/ なんか気楽に見れる。見やすい。 WEBdeDB http://www.webdedb.com/ 更新減ってきたけど、数多い。 (Faviconつけてほしいー…) WEBデザインの見本帳 http://www.web-mihon.com/ 印象から検索できるのは嬉しい。 サイトがかわいい。 webselection http://web-selection.com/ シンプル。み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
IDEA * IDEA