レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
ウェブアナリストが考える「分析」をしなくても良い4つのシチュエーション - Real Analytics （リアルアナリティクス）
普段は、ウェブアナリストとして社内や講演で分析の必要性や、改善のためのPDCAサイクルを回すことの大切さなどをお話していますが、分析は「どのサイトでも、常に実行しないといけない」というものではありません。そこで、分析をしなくても良い4つのシチェーションを紹介したいと思います。逆にこのシチュエーションで分析をしている場合は、多分手を止めて考えてみたほうが良いです。 「その分析は本当に必要なのか」と。 シチュエーション1： アクセス数が少ないサイト アクセス数が少ないサイトは、コンテンツの作成や集客に時間を使うべきです。その理由としては、アクセス数が少ないサイトではデータを見ても判断を誤ってしまう可能性があるからです。流入が10件しかない記事の直帰率が90%だったり、流入が5件のキーワードの内2件でコンバージョン率40%といった極端な数値が出てしまいます。またボリュームが少ないため、改善施策を
Webアプリエンジニアができるまで」に行ってきた - tomoima525's blog
「Webアプリエンジニア養成読本」という本の刊行記念でトークセッションが開催されていたので参加してきたので、その感想書きます。 Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus) 作者: 和田裕介,石田絢一(uzulla),すがわらまさのり,斎藤祐一郎出版社/メーカー: 技術評論社発売日: 2014/03/11メディア: 大型本この商品を含むブログ (2件) を見る 内容は「Webアプリエンジニア養成読本」の著者である和田氏(ゆーすけべー/「ボケて (bokete)」開発者)、石田氏（フリーランスエンジニア）、すがわら氏（『パーフェクトRuby』共著者）、斎藤氏（株式会社ハートビーツ 運用エンジニア）の4人が、webサービスを作る楽しさをざっくばらんに話すといったものでした。 なるほどなーと思った言葉
Webデザイナーに愛を込めて。ディレクターが意識すべき７つのポイント | LPO研究所
LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、本当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは？」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか？ 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
バナーレイアウト20選
効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし
SEO - Kick Media
Great value Aussie dollar pricing to add a healthy profit margin. Nothing beats experience with 12 years in the SEO industry. We get results with a solid track record in the Ecommerce industry. Innovative Ecom SEO methods to rank thousands of products. The best content relevance optimization strategy in the industry. High authority backlinks for category and product level rankings.
スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術
作成：2014/03/17 更新：2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 １．イラスト作成のスキル ２．写真の撮影技術と知識 ３．動画編集の技術 ４．コピーライティング ５．モーショングラフィック ６．電子書籍の作成 Webデザイナーの基本知識とスキル ７．UX・UI・IAの知識 ８．レイアウト基本原則 ９．配色＋色彩計画 １０．フ
CNET Japan - mobile
人気の記事 1「motorola razr 50/50 ultra」実機を試す--デザインも中身もさらに「楽しく」 2024年06月29日 2「VITURE Pro」レビュー：愛用のXRグラスがさらに進化、ゲームにも映画にも活躍中 2024年06月28日 3楽天「プラチナバンド」、YouTubeユーザー規制強化など--週間人気記事をナナメ読み（6月21日～6月27日） 2024年06月28日 4高性能キーボードHHKBに輪島塗モデルが復興支援で再び--1万9800円からのキートップも 2024年06月27日 5Instagramで「既読」を付けずにDMを閲覧する方法 2024年03月11日 6過去のホームページを収集・公開しているウェブアーカイブサービス7選 2016年01月31日 7LG、PC不要で「Netflix」など視聴できるモニター--「Makuake」3006％達成、全国販売へ
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
webアプリエンジニア養成読本 #webapp_mook をいただきました - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
著者のひとり id:uzulla さんから「webアプリエンジニア養成読本」という本を献本頂きました。うれしい！ Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus) 作者: 和田裕介,石田絢一(uzulla),すがわらまさのり,斎藤祐一郎出版社/メーカー: 技術評論社発売日: 2014/03/11メディア: 大型本この商品を含むブログ (2件) を見る 目を通させていただきましたが、かなり面白い立ち位置の本でした。 第 1 章 Web技術オーバービュー そもそも Web アプリってなんなのっていうか HTTP ってなんなの HTML ってなんなのとかそういうことが書いてあります。そもそも Web 技術がいろんな技術の集合体であるので、Web技術をざっと見回すだけでもかなりの紙面が必要であろうところを（
新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法｜MarTechLab（マーテックラボ）
LPO研究所の鳥居です。 「イメージしてたデザインと全然違う」 「これじゃ売れる気がしないんだけど」 「ちゃんと頭使って考えてんの？」 突然ですが、あなたは日常的にこんなことを言われていませんか？ 今の職場でWebデザイナーとして働きはじめてはや７年。私は、今では後輩デザイナーの育成も行う立場なのですが、新人が先程のようなセリフを言われるのを毎日のように目にしています。 無論、私自身も新人の頃はこっぴどくやられました。 今なら分かることですが、これは 新人Webデザイナーが共通して「取るべきコミュニケーション」を取っていないから起こるトラブル なのです。 あなたは今、デザイン制作におけるコミュニケーションに自信を持てていますか？ もしかすると今この記事を読んでいるあなたは「Webデザイナー」ではなく、クライアントから要望を聞く「営業」や「ディレクター」の立場かもしれません。 しかし基本は同
SEOの効果を高めるために活用したい自社サイトのチェックツール3選 - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
自社のサイトへ多くのユーザーを集めるためSEOに力を入れている企業は多いでしょう。しかし、ただやっているだけでは意味がありません。仮説検証を繰り返し、自社のサイトをより魅力的にしていく必要があります。そのため、自社サイトのチェックツールは欠かせないツールです。 しかし、自社サイトのチェックツールには、無料で使えるものから有料のものなど様々存在するため、どのツールを使えば良いのか迷ってしまうのが正直なところではないでしょうか。そこで、今回は実際に役立つサービスを3つ紹介します。 User Heatは、ユーザーの動きを可視化してくれるヒートマップツールです。ヒートマップツールとは、ユーザーが「どこをクリックしたのか」「どこを見たのか」などをサーモグラフィーを通して可視化してくれる、便利な分かりやすいツールの事です。マウスの軌跡、つまりマウスがどう動いたか等の情報や、クリックされた場所、読まれた
![SEOの効果を高めるために活用したい自社サイトのチェックツール3選 - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/2fb6f5f20624c69f433a1de32b8d90666da7e977/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47491660.jpg)
GmailやFacebookなどのクラウドサービスを統合するクラウド型デスクトップサービス
ZeroPC（https://www.zeropc.com/）は、ブラウザーの中に「デスクトップ」が表示されるWebアプリケーションだ。デスクトップからは、GmailやFacebook、SkyDriveなどのクラウドサービスを利用できる。もちろん、ブラウザーさえ動けば、どのデバイスからアクセスしても同じデスクトップが表示される。複数のクラウドサービスをまとめて管理したい方は、一度、試してみてはどうだろうか。ブラウザーの中でデスクトップを操作するという、ちょっと不思議な感覚も味わえるだろう。 ブラウザーの中のデスクトップからクラウドサービスを利用できる「ZeroPC」。開発は米ZeroDesktop, Inc.。URLはhttp://www.zerodesktop.com/ 一見すると普通のデスクトップ、背後ではクラウドと接続 Googleの各種サービス、DropboxやEvernote、F
W3C、ゲームコントローラ対応の標準仕様「Gamepad API」のドラフトを公開
入力デバイスとしてマウスやキーボード、タッチとは別に、ゲームマシンのコントローラのようなデバイスに対応する仕様として、W3Cは「Gamepad」仕様のワーキングドラフトを公開しました。 この仕様がどういうものなのか、Introductionのところで次のように説明されています。 Currently, the only way for a gamepad to be used as input would be to emulate mouse or keyboard events, however this would lose information and require additional software outside of the user agent to accomplish emulation. 現在のところ、インプットデバイスとしてゲームパッドを利用するにはマウスかキ
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki
Photo by Gayatri Krishnamoorthy via Flickr Bookmarklet(ブックマークレット)は、Webブラウザに追加できる小さなプログラムです。 ブックマーク(お気に入り)に置いといて、そこから呼び出す小さなプログラムなので、こんな名前になってます。 たとえば、Wikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。 Webブラウザを使っていると、自分専用でちょっとした便利な機能が欲しくなることがありますよね。 解決する方法は色々あるけれど、とりあえずBookmarklet(ブックマークレット)が簡単なんじゃないか。 ということで、作り方を調べてみました。 ちなみに、ドラッグで選択した文字を検索するのは、ブックマークレットを使わなくても、右クリックすればOK >>オススメのJavscript解説書 確か
WEBライティングでSEO効果を倍増させるために絶対やるべき17のこと
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBライティングを正しく学び実践することで検索エンジンからの流入が加速する。 webを閲覧するユーザーにとって最適な形でライティングを施すとユーザーからの支持が得られ、それが結果として検索エンジンの評価に繋がるということだ。 スマートフォンの普及に伴って「読みやすいライティング」と「読みにくいライティング」の差が浮き彫りになっている。 あなたも、テキストがぎっしり詰まったwebページに遭遇した経験はないだろうか？たくさんスクロールしても、なかなか答えに辿り着かないストレスフルな経験を味わったことはないだろうか？ このようなユーザー体験を損ねるライティングは最悪だ。ユーザーに嫌われるし、検索エンジンからも嫌われる。たくさんのユーザーに読ま
フロントエンド開発今昔物語 - Qiita
フロントエンドと言っても、アプリやゲーム制作などではなく、いわゆるWebサイト制作のクライアントサイド側の話になります。 時代背景 おじいさんには、Photoshop、Illustrator、Dreamweaverという3種の神器がありました。当時のWebサイト制作は、これらのソフトを利用し、おじいさんが一人で行っていました。おじいさんのような仕事をする人は、Webデザイナーと呼ばれ、とても人気がありました。おじいさんは幸せでした。 いつしかWebデザインは分業化されるようになりました。おじいさんは久しくデザインをしていません。現在の彼の仕事は、デザイナから受け取ったPhotoshopデータを基にWebサイトを制作することです。それはHTML5サイトというとても都合の良いバズワードでまとめらてしまうこともあります。このことについて、おじいさんはやり場のない憤りを抱いています。 HTML/C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ
