皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 今回は、弊社のプランナー・ディレクターが ランディングページの構成作成後 ランディングページのデザイン完了後 ランディングページのコーディング完了後 にそれぞれ行っているチェック内容を公開します。 細かい所ですがこの「チェック」のレベルによってプロとアマの違いが出るとも言えます。 何百本ランディングページを構築した熟練の経験者であろうとも、1回で完璧なものができることは決してありません。チェックを通してブラッシュアップされていくのです。 ランディングページ構築における一番の肝は、構成を引く前のターゲット設定・集客設計にあるのですが、今回はそこまで書くと壮大なボリュームになってしまうので、実制作に入った後のチェック項目に限定してご紹介します。 それでは早速ご紹介しましょう。 目次 ファーストビューで言いたいことが伝わるか？ 見出し
thatに思いを馳せる JavaScriptにおいて that = this とか self = this なパターンを頻繁に使うと、作業者の理性が保証されない場合に下記に示す2点の問題が起こりう得ると思っている。 「あー、どうなのかなー、うーん」と思いながら書いてみる。 1.メソッド分割が適切におこなわれない雰囲気 ちょっと極端かも知れないが、Backboneっぽいコードを例にしてみる。 initialize: function() { var that = this; this.listenTo(this.entity, 'success', function() { var bar = that.foo(); that.$el.find('.qux').text(bar); // long. // long.. // logic... }); this.entity.execute(
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1か月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセットで書く、というようなもの。例として、プロ野球セ・リーグの各チーム色を背景色にしたクラスを吐くもの作ってみる。 $team-colors: ( giants: #f90, tigers: #fc0, carp: #f00, dragons: #009, baystars: #269, swallows: #03c ); @each $team, $color in $team-colors {
技術開発力をどの方向にのばすべきか、どの程度の水準までを目標とすべきか。それを制御すべきなのは人間中心設計の担当者の人間生活への洞察力であり、また利用状況に関する知見である。 黒須教授 2013年10月17日 日経Web版の2013年8月2日に「過酷なスマホレース、ドコモは「長男」NECを助けなかった」という記事が掲載されていた。そのなかにNECカシオのスマートフォンについて「ＮＥＣカシオも、スマホへの展開が決して遅かったわけではない。11年３月には薄型にこだわった「メディアスＮ－04Ｃ」を投入。その後も、日本メーカーの技術力を生かし、薄型でありながら早い段階で防水性能を実現するなど、「個性」は十分に出した製品開発をしてきたと思う。だが、その個性は必ずしもユーザーに受け入れられるものではなかった。薄型にこだわったあまり、持ちにくいきょう体で操作しにくかったり、バッテリーが小さいことでフル充
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
Illustratorの楕円ツールで書く円は、本当は円（wikipedia:円 (数学)）ではなくて、近似値なんです。つまり、円としてはわずかに歪んでいるわけ。これはベジェ曲線（wikipedia:ベジェ曲線）というものを使う以上、そういう仕様なのですね。 ……ということを、いちおう知識として知ってはいたのですけど、「実際のところ、どれくらいの歪みがあるんだろ？」ってちょっと気になりませんか。 「でも、Illustrator内で正しい円が用意できないってことは、歪んだ円と比較も出来ないということではないの？」……そんなふうに考えていた時期が、自分にもありました。 でもでもですね、ちょっとした操作でその歪みを実感することは可能なのです。 ▼まず、楕円ツールで円を作ります。 ▼複製コピーして、片方を45度傾けます。色も変えましょう。 ▼2つの円を重ねます（整列を使うといいです）。 ▼ちなみに円
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、パシャオクのデザインを担当している今尾と申します。 今回は、UI設計や表現の話ではなく、プロジェクト進行における効率化の一環として ・次々に打ち出される改善施策へのスピーディな対応 ・デベロッパーとのスムーズなデザインファイル共有 ・新参スタッフや後任者へのスムーズなデザイン作業移管 などのために、パシャオクでテスト的に実践しているデザイン管理の方法をご紹介したいと思います。 ページの構成とスピーディーなデザイン改善 Amebaのいくつかのサービスと同様に、パシャオクの各ページも、 複数の異なる情報群にユーザーが効率的に接触できる場にす
ドコモの公衆無線LAN「docomo Wi-Fi」が設定不要で利用可能に。SIM認証に対応 NTTドコモ（以下、ドコモ）は15日、同社が提供する公衆無線LANサービス「docomo Wi-Fi」において、同日よりSIM認証（EAP-SIM・EAP-AKA認証）に対応したと発表した。 これまで、docomo Wi-Fiを利用する際には、「docomo Wi-Fiかんたん接続」アプリの設定やユーザーIDとパスワードによる設定等が必要だったが、SIM認証へ対応したことで、それらの設定が不要になる。 対応端末ではWi-FiをオンにするだけでSIM認証対応エリアにおいてはdocomo Wi-Fiを利用できるようになる。しかも、SIM認証の利用により、Wi-Fiアクセスポイントへの接続時間も短縮され、従来よりも短時間かつスムースにdocomo Wi-Fiへ繋げられるようになる。 このSIM認証の利用に
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。 有償だけど高品質で種類も豊富みたいなセットもあったりするんですが、今回は基本的にフリーで使用できるもので、国内外合わせると全部で34サイトまとめています。 また、アイコンフォントの使用方法についても簡単にですが紹介するので、まだ使ったことがないけど実装したいという場合はそちらを参考にしてみてください。 アイコンフォントについて レスポンシブwebデザインが広まったなどをきっかけに、多くのサイトやブログでも取り入れられているのを見かけるようになったアイコンフォント。 実際に使用したことがある人ならわかると思いますが、本当に手軽に実装できて且つメリットもいろいろと
導入 アクセシビリティとはWEBサイトを閲覧する利用者の誰もが必要とする情報を、確実かつ快適に利用できることをいいます。ご高齢の方や障がいのある方がWEBサイトを利用できることのみならず、キーボードだけでページを閲覧している方や音声が聞き取りづらい環境にある方など、さまざまな環境でさまざまな利用者がWEBサイトを利用できることをアクセシビリティが確保されていると考えます。 目的 「情報革命で人々を幸せに」という経営理念の下、インターネットカンパニーとして、世界の人々が最も必要とする技術やサービスを提供する企業グループを目指しています。その一環として、ご高齢の方や障がいのある方をはじめとした、さまざまな方が快適に利用できるWEBサイトを提供することも重要であると考えています。本指針ではWEBサイトの企画・設計・制作・検証・保守・運用に関するアクセシビリティの方針と基準を定めます。
Foremost, forms are about task completion. I’m sure I’m one of only a handful of people in the world who actually check out forms for fun; every other (reasonable) person just wants to fill out the form to get their car registered or buy those shiny new shoes. With content, however, finishing a task isn’t always a priority. Sometimes, we just want to browse without a specific end point in mind. (W
iA Writer is a great app for distraction-free writing, but before reading Jason’s tweet I’d never considered it a tool for UI design — but by combining text with some basic HTML I’ve found mocking up text-only UIs to be a helpful step in judging the overall effectiveness of an app. To quickly demonstrate text’s value, here are some popular feeds, sans graphics. Note: I tried to show the visual wei
構想に1年、制作に２週間。（実制作時間は40時間くらいかな？）非常に長い時間をかけてやっとオリジナルのWordpressのテーマが出来ました。詰めが甘い部分が多々あるので、運用しながら色々修正して行こうと思いますが、とりあえずは一通り形になって一安心です。 WordPressのオリジナルテーマ作りの流れ デザインする（ラフを描いて、Photoshopでレイアウトとパーツを作る） HTMLとCSSでコーディングする WordPressテンプレートにする デザイン これは本業というか今まで散々やってきた事なので、すぐに終わりました。そんなに手の込んだものを作ろうとも思ってなかったので制作時間4〜6時間程度？で終了です。 流行のフラットデザインを取り入得れようかなとちょっと心をよぎったものの時間を優先するため以前に作りかけて放置していたデザインをそのまま流用。クオリティ的にはちょっとアレな部分も
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
Windowsユーザーだった女子編集者が、実際にMacを使うなかで出合ったトラブルを解決する本連載。このような記事を作るため、よくスクリーンショットを撮ります。ブログなどをやっている方は同じかなと思います。 ファイル名は「スクリーンショット 2013-10-08 19.46.55」のようになります。アイコンサイズやグリッド間隔によって異なると思いますが、先頭部分が長すぎてファイルの識別がしづらいです。そこで、無駄に長い「スクリーンショット」の部分を短くする方法を実践してみました。 ターミナルをいじるのですが、Mac初心者でも怖くないとても簡単な作業です。以下のように入力すればOK。 defaults write com.apple.screencapture name "ここにファイル名の先頭部分" 「スクリーンショット」の代わりに「SS」と付けてみます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
