Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
CVRが驚くほど上がるボタンデザイン7つの法則
Webサイトやアプリを訪れたユーザーに対して、ゴールまでの最適な道筋をつけるのがCTA（Call to Action：行動喚起）。このCTAを意識してボタンをデザインすることで、クリック率やコンバージョン率を大幅に改善できます。ボタンを実装するときにチェックしておきたい7つの法則を紹介します。 1.ユーザーの言葉を使う ネットで買い物しているところを想像してみましょう。以下の2つのボタンがあったら、どちらを押したくなるでしょうか。 ほとんどの方は、右の「注文する」を選んだはずです。デザインがまったく同じボタンがあったとしたら、自分が日ごろから使っている言葉のほうがピンときて押しやすい。企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーはアクションを起こしづらくなります。ボタンのラベルにはユーザーが普段使っている言葉を使いましょう。 Webサイトの制作ではつい企業目線の言葉を
Webサイト制作の中心に分析を！Ptengineの便利な機能と使い方【導入編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGのアートディレクターの長岡です。 Webサイト改善のためにGoogle Analyticsなどのアクセス解析ツールを使って、数値を分析している方は多いのではないでしょうか。 ツールを使いこなせば、それなりに問題点や課題も見つかるようになるのですが、どうしても数値からでは判断できないこともあります。 そんなときに利用したいのがヒートマップツールでしょう。 アクセス解析と合わせてヒートマップを利用することで、立てた仮説や効果を視覚化して検証することができ、より深い分析につながります。 そこで、みなさんは「Ptengine」をご存知でしょうか？ Ptmindさんが開発しているヒートマップツールなのですが、実際にLIGブログで導入してみて、その多機能さに驚かされました。 今回の記事では、その「Ptengine」の便利な使い方、導入するとどのようなことができるのかを、実際に使ってみ
スマホサイトのパーツをことごとく網羅！「スマートフォンサイトUI図鑑」は是非手元においておくべき一冊
スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほんとに欲しかったんです。 書籍の内容 何度もコピペして使いたい定番43パーツを厳選。 スマホサイトのUIの名前と使い方、ソースコードをまとめました。 「コーチマークってどんなUI?」「タイムラインってどうやって作るの?」 本書は、スマートフォンサイトの制作で欠かせないUIパーツの「名前がわからない」「使い方がわからない」「作り方がわからない」を解決する本です。 定番の43パーツを体系化して収録。豊
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
SEOとは検索ユーザーに120%の価値と満足を提供すること
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. SEOとは、「Search Engine Optimization（検索エンジン最適化）」の頭文字を取ったもので、簡単に表すなら「検索エンジンで上位表示を達成するための技術」と言える。 現在では85%以上の企業が、第一にコンバージョンの獲得、第二にブランドの浸透を目的として、SEOに取り組んでいると言われている[1.2]。 特にWEBマーケティング先進国のアメリカでは、WEB関連費用のうち、実に30%以上をSEOに費やしている[3]。 実際に、このバズ部や、SEOに取り組んで成功している弊社クライアント様事例を平均すると獲得しているお問い合わせの約80%はSEO経由だ。そのため私は、SEOが上述のデータ以上に必要不可欠であることを実感して
まとめサイトの未来を感じる：キュレーション＋クチコミコミュニティの「Cir-Cle」に注目｜まだ仮想通貨持ってないの？
キュレーションメディアの派生系として地味に可能性を感じます。 Cir-Cle［サークル］｜“お役立ちサービス”情報まとめサイト 情報をまとめつつ、コミュニティも生まれるキュレーションメディア「Cir-Cle」 「Cir-Cle」は新興のまとめサイト、もとい、かっこよく言うとキュレーションメディア。こちらは現在「ウェブサービスの紹介」に特化しています。大量に国内新興サービスがまとまっており、読んでいて普通に楽しいサイトとなっています。IT系の仕事をしている方は参考になると思います。 このサイトが面白いのは、コミュニティっぽい機能があるんです。各サービスにはブランドページが生成され、サービスの概要と「使っている人」「サービスについてのレポート」が閲覧できます。キュレーションサイト＋クチコミサイトという感じです。この方向性の進化はありえますねー。 ブランドを検索するページもすでに用意されています
営業マンへの教育・投資はするのに、なぜウェブへの投資はしないのか？
概要 ▶ ホームページをネット上の営業マンと思えば、不適切な応対でお客様を迷わせたり、諦めさせたりすることはないでしょう。営業マンの教育と同じく、継続的な改善が必要です。 先日会社に研修に来られている方とのお話で以前からの取り組みについてお話をしたので、そのことを。 ※以下、ホームページとウェブという単語が混じりますが同じ意味で考えてください。 ●15年間ホームページを直し続ける私は会社でビジネスとしてのウェブに関わって、もう15年になります。 入社時はシステム部配属だったので、サーバーの管理やらコンテンツの管理などから。 現在でも、手を入れてホームページを直し、そして作り続けています。 15年も？ 15年もです。それも日常的に、です。 おかしいですかね？ 会社はホームページに対して（私の作業を含めて）結構投資をしてきたと思っています。 ●新人営業マンに指導しないの？ 世の中には、ホームペ
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
100円プロトタイプ（The $1 Prototype）
2015年2月28日 Regional Scrum Gathering Tokyo 2015 : Day 1 : [1E-2] 100円プロトタイプ ～ ポストイットで、あっという間にモバイルUXデザインRead less
KPIを設定してからUIデザインする | keisuke tsukayoshi
最近デザインで失敗してしまったことがあって、そのときの話。 それはぼくがあるUIの改修に取り組んでいたときに起こった。 起：「ある機能が完成したから、組み込んで」 ぼくに与えられた仕事は、もともと組み込む予定だったある機能のバックエンド側が完成したのでフロント側に組み込む（デザインする）、というものだった。フローのなかに組み込むので置き換える機能があったり前後の流れを変えることも含めて、色々考え始めた。 どういうものがユーザーに求められているのかを軸に、インタビューする前に考えを整理した。 承：ユーザーの使いやすさを求めてデザイン その後何人かにユーザーインタビューをして、どういうものが求められているのかとかどう使っているのかなどだいたいの感触をつかんだら、インタビューでわかった事実をもとに導線設計を始めた。 なかなかいい感じかと思われたが、UIモックが完成したあとのユーザビリティテストで
フロントエンドできない人が、フロントエンドやりすぎだ。あと、Vanilla.jsが便利だ。 - nobkzのブログ
最近、なんというか、フロントエンド勉強会に出席する度に、「フレームワークじゃねぇんだ! MVC設計がな! 」とか言い続けている気がする。たくさんフレームワークが出てきて、○○フレームワークの問題とか、開発の困難の話を聞く度に、自分の設計を棚に挙げて、「これは、フレームワークがスケールできないせいだ!」「jQueryが糞」とか言ってて、「何言ってんの?コイツ?」みたいな気分になる。 最近になって、なんでこの状況がいつまでたっても変わらないんだろう? って理由が分かってきた。フロントエンドできない人が、フロントエンドやりすぎなのだ。 なんでフレームワーク使うの? そもそも、なんでフレームワークを使うか?ってことに答えられない人が多い気がする。というか、大抵「上司が決めたから」とか「チームで決まっているから」という答えが返ってくる。そもそも、フレームワークを強制して学習させる環境になっている現場
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
デザイナーのための「デザイニング・イン・ザ・ブラウザ」～DreamweaverとPhotoshopで習得する
デザイナーのためのデザイニング・イン・ザ・ブラウザ CSSフレームワークとDreamweaver Extract／Photoshop「アセット抽出」による最新ワークフローの習得 さまざまなデバイスで「見やすい、読みやすい」ウェブページをインブラウザ編集で作成しよう Course Content Outline Creative Edge School Booksの2015年最初の学習コンテンツは、Adobe Dreamweaver（ドリームウィーバー）とPhotoshop（フォトショップ）を連携活用した新しい作業方法を学ぶためのテキストブックです。Dreamwever編（基礎編・実践編）とPhotoshop編の3冊に分かれています。 達成目標は、スマートフォンやタブレット、PCなどの多種多様なデバイスで「見やすく」「読みやすい」ウェブページを作成できること。 Dreamwever編は、CS
情報革命時代における多様性の共存とエンジニアのキャリア、評価について
2013/04/23に株式会社ぐるなび様で開催した「We energize us - 明日の現場を高揚させるプラクティス - ( http://devlove.doorkeeper.jp/events/3511 )」で発表した内容です。 「We energize us」では現場に活力を与えるプラクティスのパタン化「Energize Pattern」の創造を目指しています。興味のある方は是非Facebookグループ「We energize us - 全速前進アクション共有 ( https://www.facebook.com/groups/571206772891343/ )」にご参加下さい。 ※2022/04/11追記 Speaker Deckに移行しました。 https://speakerdeck.com/takigawa401/20130423-number-devlove-zhi-c
進行管理が上手なディレクターの特徴 | Web制作に関するブログ | 株式会社シロクロ
職業柄色々な会社のWebディレクターと一緒に仕事をします。画面設計やスケジューリングなど、人によって一つひとつやり方が違うので、仕事をしながらディレクション業務を学べるメリットがあります。その中で、仕事がしやすい、進行がスムーズだなと感じた方の特徴をまとめてみました。 連絡がまめでレスポンスが早い個人的に一番の特徴はこれでしょうか。進行管理が上手な方はとにかく連絡がまめです。いつでも連絡がつくし、必要なことはその都度報告がきます。そして反応が早い。こちらが何か質問すると、すぐにクライアントに確認をとり、即座に返信がきます。場合によっては、質問している間に作業が止まることもあるので、レスポンスが早いというのは、それだけで制作側にとっては心強い存在なのです。 スケジュールにディレクターチェックと、その修正作業の時間をいれている例えばデザインの初稿を提出する時、一般的にはクライアントの前にディレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
紙とペンだけで良質なコンテンツのアイデアをアウトプットできる魔法のツール、マンダラートとは？ | 誰も語らなかったWebコンテンツ作成技法
激熱プラグインCustom Field SuiteとWordPress Front-end Editorをさわってみよう！
コピペ一発でWordPressの投稿時にアイキャッチを自動設定させるカスタマイズ方法（YouTube対応版）
