BootstrapのUIがドラッグアンドドロップだけで組める！最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 - Chrome Life
先日、Twitter Bootstrapが2.1.1にアップデートされました。 Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。 最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。 とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。 Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。 そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。 jetstrap - B
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
Web制作フローの再考とDesigning in the browser
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
制作会社の人がやってしまいがちなSEO基本中の基本のミス など10+2記事（海外&国内SEO情報） | 海外&国内SEO情報ウォッチ
SEOに重要な基本的要素で、ウェブ制作会社が大切なことを見逃して失敗しがちなことを指摘した記事。Webディレクターとしてサイトの制作に携わっていたときに発見したというもので、次の4つの失敗パターンを挙げている。 titleタグにキーワードを入れないtitleタグやmeta descriptionの重複を気にしないrobots.txtやsitemap.xmlを設置しないデザインを優先して隠しテキストを使ってしまう1つ目と2つ目は実際に多いと筆者も実感している。SEOとしては基本中の基本であるし、titleタグにキーワードを入れることと各ページにユニークなtitleタグとmeta descriptionタグを設定することは、ユーザーにページの内容を伝えるうえでも重要だ。 3つ目のrobots.txtとXMLサイトマップは大切ではあるが必須ではない。robots.txtはクロールをブロックするペ
全12カテゴリー。分野別で見る、Webサイトを構築する上でそれぞれ注意すべきポイント / Maka-Veli .com
やはりサイトの存在目的は必ずあります。デザインやシステム的な部分も重要ですが、 その前にもう一度目的を考えなければなと・・・ そう思ったので書いてみました。 色々と皆さん、それぞれに考え方があると思いますが、個人的に注意したいポイントを以下の分野別に書いていきます。 大体サイトとしては ブログ 一般企業 Webサービス IT・プロダクト・ゲーム オンラインショップ 教育・学校 病院・老人ホーム 飲食 デザイン・ファッション・音楽 金融・証券・保険 美容・健康 アダルト とか、その他色々ありますがこのような感じでしょうか？ ※ちょっとカテゴライズが不思議な感じですが、説明しやすくしたい為です。すいません。 これらのサイトはもちろんケースバイケースで設計や装飾などが変わってきますが、 共通する注意点があると思います。 それぞれ、コンバージョンは必要ですよね。 ゴールを必ず決
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention（注意）喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
ブログやウェブサイトですぐに役立つ「.htaccess」の設定のまとめ | コリス
ただいまメンテナンス中です。 （The server is now under maintenance） ご迷惑をお掛けいたしまして、大変申し訳ございません。 メンテナンス作業が終了次第、サービスを再開いたします。 今しばらくお待ちいただきますよう、よろしくお願い申し上げます。
Web制作の見積もりの出し方について改めて考えてみました。 │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 最近見積りを作る機会が多く、「フリーランスのための全国Webサイト制作料金表まとめ25個」というまとめ記事をたまたま見ていて、Web制作における見積もりの適正価格と算出方法というものについて考えていました。 Web制作業界はフリーランスの方も多く、価格もそれぞれかなりの差があり、何を持ってして適正価格なのかもよく分からなくなってきています。見積もりの算出方法も異なります。 価格のばらつきもさることながら、Webサイト制作は実際にものがあるわけではなく、無形の状態から完全にオリジナルで作るわけで、お金を出して依頼する方も不安はあるかと思います。 結局、費用に対して割りにあった成果物があれば、依頼者は文句ないわけですが、見積もり段階ではどんなものが出来るのか頭の中にあるだけなので、見積もりが適正なのかも判断
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Web制作初心者に読ませたい、最近の初心者向けWeb制作ネタ
Twitter bootstrap入門 #twtr_hack