初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
iPhone6の時代のviewport設定について - Qiita
従来、スマートフォンの横幅といえば 320px(retina対応で640px) というのが定説でした。 が、iPhone6の普及でそうとも言えなくなってきたのが今日このごろです。 iPhone5の横幅は320px(retina対応で640px) iPhone6の横幅は375px(retina対応で750px) ちなみにNexus5の横幅は360px(retina対応で720px) さてこんな環境で、viewportはどう指定するのがベストなのでしょうか。 前提知識 viewportのwidthという値に、device-widthと指定すると、スマホの画面幅 = 表示するwindowサイズ、となる。 widthにピクセル値（640px、とか）を入れると、表示幅はそのピクセル数になり、それで画面いっぱいになるように適宜拡大縮小される 古いAndroidでは、widthにピクセル値を指定しても
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
デザイン力を鍛える！Webデザインのフロー別セオリーと知識まとめ
以前、「WEBデザインが短期間で上達した方法」では、 上達する近道として模写を紹介しましたが、 それ以外にも基本的なセオリーや知識を知っているだけで、 デザインをする力が格段にアップします。 4月からWebデザイナーになる人、また学校に通う人向けに Webデザイン（カンプ）を作成する際のデザインの制作フローごとに 大雑把にですがビジュアル面を中心として、 セオリーと知識をまとめました。 もくじ 情報共有 競合調査 ワイヤーフレーム デザイン 完成に向けて まとめ 余談 情報共有 ディレクターや営業と情報を共有し方向性を統一するのが第一歩。 どのようなクライアントで、どのようなデザインをするのかを ヒアリングやミーティングで共有することで、 デザインのクオリティが変わってきます。 ウェブ制作で使えるヒヤリングシート ディレクターとデザインのあれこれを共有する方法のまとめ 競合調査 クライアン
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法
あなたはコンバージョン率やクリック率の高いボタンを作る方法をご存知でしょうか？ディレクターに「コンバージョン率が低い」と言われると「あれ？自分のデザインのせいかな？」なんて思ってしまいますよね。そこからフォームやボタンのデザインを見直すWebデザイナーさんも多いと思います。 ではどうすればコンバージョン率の高いボタンを作ることが出来るのでしょうか？それは「人の心理を理解する」ことです。そうすることであなたもコンバージョン率の高いボタンを作ることが出来ます。 事実、A/Bテストを用いた検証でコンバージョン率を大幅に改善した事例は数多く存在します。今回はその事例と「コンバージョン率の高いボタンを作る方法」を併せてご紹介します！ そもそもコンバージョンボタンとは？ 本題の前に、そもそもコンバージョンボタンとは何のことか再確認してみましょう。コンバージョンボタンとは、Webサイトに訪れたお客様に資
コンバージョン率アップ！入力フォーム最適化(EFO)14のポイント
あなたのサイトの入力フォームは、お客様にとって使いづらいフォームになっていませんか？フォームはお客様のストレスを最大限に減らし、快適で分かりやすいフォームにしなければなりません。フォームの使いやすさ、つまりユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。 そしてフォームのユーザビリティを上げるには、入力フォーム最適化(EFO)をする必要があります。フォームの最適化をすることでユーザビリティが向上し、コンバージョン率の向上に繋がります。そこで今回は、具体的にどのような入力フォーム最適化をすれば良いのか、改善例を元にご紹介します！ そもそも入力フォーム最適化(EFO)とは？ 入力フォームからのコンバージョン率が低い場合、まずはコンテンツやデザインを見直します。しかし、あなたは入力フォームを見直したことがありますか？コンテンツやデザインの見直しも重要ですが、コンバージョンに
コンタクトフォームのデザインやカスタマイズにオススメの５つの小技とイケてるフォーム３選！ | 札幌・東京のホームページ制作・ウェブ制作会社monomode
お問い合わせフォームを皆さんはどのように作っていますか？ 「よくクライアントからは、お問い合わせフォーム作るのにそんなに予算がかかるなら、メールアドレスを乗せるだけでいいよ」なんて言われることもあります。でも、イケてるお問い合わせフォームに仕上げれば、問い合わせ率が格段に上がり、問い合わせ経由での受注なんていうのも実は多いです。その為にも、今回はイケてるコンタクトフォームを作る小技をご紹介します。 フォームのデザイン、カスタマイズに活用できる小技！ 選択しているテキストボックスを明確にする :hover要素をaタグで良く使うように、テキストボックスでは:focus要素を使用しましょう。入力中のテキストボックスに薄らと背景色を付けてあげると、ユーザビリティーが向上します。 [codepen_embed height=”266″ theme_id=”13493″ slug_hash=”zxeL
舐めちゃダメよ！お問い合わせフォームの作り方
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる アクセスアップ！ それだけが、ホームページからの売上をアップさせる方法じゃありませぬ。 アクセス数を増やさなくても、お問い合わせフォームに少し工夫を加えるだけで、売上が大きく改善することもあるのです。 今回の記事では、効果的な「お問い合わせフォームの作り方」を実例付きで解説します。 無料で使えるおすすめの「メールフォーム作成ツール」も紹介するので、乞うご期待！ 事例： お問い合わせフォームの改善で売上げアップ！ 下の図が何か、わかりますでしょうか？ Googleアナリティクスというサービスで、あるサイ
手書きワイヤーフレームのススメ - Qiita
みなさん、デザイン作り始めるときノートと鉛筆使ってますか。 私はめっちゃ使います。 今回は「紙にアウトプットすると良いことあるよ」というお話です。 手書きワイヤーフレームを引く利点 推敲が楽チン（書いたり消したり） ノートひとつあればすぐ確認に走れる ページ構成の「設計」思考が身につく 【実例】ワイヤーフレームを引かなきゃ損！ 実際のお仕事の流れを追いながら、ワイヤーフレームの便利さを訴えていきたいと思います。 まず構成案を読み解く はじめに受け取った構成案を眺めます。 今回作成するのはLP（ランディングページ）の「FXのはじめかた」。 FX初心者（女性）に向けたHowTo記事です。 ディレクターから受け取った構成案はコレ。↓ FX初心者向けのイロハが丁寧に解説されています。 ディレクターの意図を聞く ヒアリングの結果、ポイントは３つ。 ターゲット：FX初心者の女性（主婦、OL） 清潔感
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
skuare.net
AMP（Accelerated Mobile Pages）対応におけるサイト作成と広告表示などなど 当サイトをAMP（Accelerated Mobile Pages）で構成しました。 元々別ページでAMP用ファイルを設けていましたが、スタンドアロンAMPのススメ - Mercari Engineering Blogという記事を見て、統一してしまおうと思ったのがきっかけです。
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お問い合わせが1.3倍！お問い合わせページ改善の3つのノウハウ | 株式会社WEB企画
Nyle Engineering Blog
