フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる

人物紹介：せぶや Webの編集者。昔オンラインの決済を売っていたので、ECの事情に少し詳しい。青森県出身。さいきん5kg太った。 ここ数年で中国人の観光客はすごい増えてますよね。中国人による「爆買い」も「2015ユーキャン新語・流行語大賞」にノミネートされたし。 これはもしかしてチャンス……！？ 中国で商売をするべき！？ てことで来日する中国人や市場を調べていたら、予想以上に伸びていることが分かりました。まずは結果からどうぞ。 伸び続ける中国の市場 まずは来日する中国人の数を調べます。上の数字は来日した中国人の数。かっこ内の数字は、前年度からの成長率です。 ここ数年で中国からの来訪者は倍以上に増えた ※出所：日本政府観光局より作成 2015年は、499万人もの中国人が日本へ訪れている結果に。2013年と比べてなんと3.5倍以上！　この勢いなら2016年はもっと増えそう！ 出所：青森県人口移

PC・家電・電子機器 (2) くらし・住まい・環境 (13) その他 (0) エンタメ・ゲーム (2) スポーツ・アウトドア (5) デザイン・アート (55) ニュース (0) ファッション (4) ベンダ・団体 (0) メーカー (2) 企画・制作・開発 (17) 健康・医療・製薬 (0) 広告・出版 (18) 政府・関連企業 (0) 教育・学校 (0) 旅行・観光・宿泊 (0) 日本企業 (3) 美容・コスメ (2) 自動車・バイク (2) 複合商業施設 (1) 通信・モバイル (0) 金融・証券・保険 (0) 雑貨・家具・文具 (0) 音楽 (0) 飲料・食品・グルメ (2) シンプル(65) スタイリッシュ(34) 面白い(20) クール(17) ファッション(14) フラット(13) 中国風(13) flash(13) シック(8) 可愛い(8) フェミニン(7) 抽象的(7)

Webサーバーという言葉は聞いたことがある方も多いだろう。 しかし、実際Webサーバーがどのような仕組みで動いているかは、構築をしてみない限りなかなかわからないのではないだろうか？ このページではWebサーバーがどのような仕組みで動いているかを初心者向けに解説した。前半だけでも読んでいただければ、基本的な知識は身につくはずだ。 Webサーバーの仕組みとは？ Linuxでは、Webサーバーとして各種ソフトウェアが用意されているが、そもそもWebサーバーとはどういう仕組みでできているのか？ クライアントとサーバー Webブラウザーはご存知かと思う。今、このページを見るために使っているツールのことだ。 Google ChromeやMozilla Firefox、Safari、Internet ExplorerやMicrosoft Edgeなど、種類はたくさんあるがまとめてブラウザという。 それ以

画像や文字などを配置する時、背景をどのようにするかでデザインは劇的に変わります。 Webや紙のデザインに効果があり、すぐに使える背景のすごいデザインテクニックを紹介します。 Ultimate Guide to Designing With Backgrounds 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 背景のデザインとは ベタ一色の背景 高いコントラストのベタ一色の背景 テクスチャの背景 グラデーションの背景 写真をつかった背景 形をつかった背景 透明の背景 ブラーを適用した背景 カラーをオーバーレイさせた背景 文字のスペースがある背景 パターンの背景 イラストの背景 空白スペースをつかった背景 グリッドをつかった背景 背景のデザインとは 背景はグラフィックデザインを築く基礎となるものです。 テクスチャとカラーはデザインに奥行

CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら

【プログラマー必見！】ライブコーディングが生で観れるサイト「Livecoding.TV」 ここ最近、プログラミングの需要が高まり日本でも動画学習のサービスが増えてきました。 個人的には録画ではなくて、ライブコーディングをしてる動画を見たいなあと思っていました。 生放送でプログラムを書いてるのはschooくらいですかね。 日本にはほぼ浸透していませんが、「Livecoding.tv」という名前からしてライブコーディング以外の何者でもない サービスがあるので紹介していきます。 Livecoding.tv schooと同じように生放送と録画に分かれていて、どちらも見ることができます。 サービスでは、無料プランと有料プランが存在します。 ライブコーディングしている人の国籍を見ると北米、南米、ヨーロッパがメインといったところです。 「japan」で検索かけても日本人じゃないのが不思議ですが笑 サービ

ウェブにはSEOの情報が氾濫している。しかし、どれが正しいのかは、いまいちわからない。最近では「良質なコンテンツを提供するのが一番のSEO対策」という論調が主流になっているが、一方でSEOのテクニックがシェアされる様子もまだ見かける。 良質なコンテンツを提供すれば、SEOの対策はしなくてもいいの？　一体、正しいSEOって何？　そんな素朴な疑問を、株式会社so.la代表でSEO専門家の辻正浩さんにぶつけてみた。 辻さんは普段からTwitterやブログなどでSEO情報を発信しており、日本でおこなわれる全検索のうち約2.5％は、辻さんが仕事で関わるサイトがクリックされているとのこと。 最近では悪質なSEO業者と熱いバトルを繰り広げたことも記憶に新しい。 そんな“SEOのご意見番”である辻さんの返事は「世の中の99％のサイトは、SEOなんて考えなくてもいいんじゃないでしょうか」というもの。その真意

このページは別のブログに移転しました。

（のちにキャッチーでポップな気の利いた文章に差し替える） いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。 dev.twitter.com 目次 1. 公式ボタンの設置方法 1.1 ボタンの種類と入力項目 1.2 ページ内に公式ボタンを複数置きたい場合 1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合 1.4 ユーザーを複数入力したい場合 1.5 推奨ユーザーを複数入力したい場合 1.6 ハッシュタグを複数入力したい場合 1.7 画像付きツイートを投稿させたい場合 1.8 動画付きツイートを投稿させたい場合

いってきたよ！ small画面でも、BIG画面でも、今すぐ使えるレスポンシブ活用術 by @ourmaninjapan オニール(O'NEILL)のサイトをレスポンシブにしたらコンバージョンがUPした例 モバイル対応はモバイルのためだけではない PCでもウィンドウせばめて見たりするよね モバイル専用にするか、レスポンシブにするか もはやモバイル = iPhoneではない 画面解像度もユーザー層によって違う ギークな人たちの画面解像度はw1200↑がほぼ そうでない人たちはw1200以下が多く、w400あたりが最も多い そしてモバイル = 小さい画面でもない 表示を最適化することが真のレスポンシブ レスポンシブで気をつける点 入力デバイスを考慮 タップできる領域・余白 ロールオーバーとか おすすめレスポンシブ実装10 meta[name=viewport] scalable=noはだめ！ぜっ

JAWS-UG福岡 2016/3/21「また濃い目にAWSの話をしてみよう」でお話した資料です。

Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。 togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。 僕がPhotoshopを教えていて一番好きな瞬間は、「○○を消せ」系の初心者向け課題で、必死で作業すればするほどプレデターを次々に生み出して絶望していく生徒に「もうお前の地球は終わりだ」と講評することです。 pic.twitter.com/gEpXGVx7xo ? ﾚｲﾆｰ氏 (@moeebu) 2016年3月8日 おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。 Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない！という方に

はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき

デザイナーのベーコン（@dogdog464646）です！！ プレゼン資料作りにも役立つ、デザイナーがついつい使ってしまうフォント4つを選んで解説しました！ 「フォントにお金を出すのはちょっと…」という方のために無料フォントを紹介します。 いいフォントを使うと明らかにデザインが締まりますので、新しいフォントにチャレンジしてみてくださいね。 １つめ『DSきりぎりす』 (DS-kirigirisu) 「DSきりぎりす」このフォントはすごいです。 ポケモンで言ったらポッチャマ。GLAYで言ったらTERU。ドラゴンボールで言ったらベジータ。つまりスーパーヒーロー！2016年もまだまだ色んな所で使われていますね。 ▼DSきりぎりす (DS-kirigirisu) (¥16,500 ） こんな感じで使われている ●コンビニ各社で使われている ファミマのクッキーエッグタルト。あっちこっちきりぎりすフォント

【2015年まとめ】今年EC業界でチェックしておくべきトレンド5選と2016年のEC業界展望 2015年もあと僅かとなりました。依然として伸び続けるEC業界とはいえ、消費者もオンラインでの購入に慣れてきて、今までの法則が通用しなくなってきている部分も多く、運営の難易度が上がってきたように感じることも多かったのではないでしょうか。eコマースコンバージョンラボもそのような中で多種多様な記事をお送りすることが出来ました。 今年50本目のこの記事では、2015年のEC業界のトレンドや出来事を振り返り、来る2016年の展望を考えていきたいと思います。 2015年EC業界でチェックしておくべきトレンド5選 改めて振り返って今年の出来事を色々見てみました。その中から、今年の一年のトレンドともいえる5つの出来事をまとめてみます。 越境EC 中国人による「爆買い」が流行語大賞になったように、特に今年の前半ま

こんにちは、2015年も終わりですね。昨年よりエンジニアのお仕事をはじめております自称エンジニアの@mochizukikotaroです。 お祭り記事ですので、皆様の箸休めの一助にでもなればと思いながら、全力で書きたいと思います。 まず感謝 当記事は、「素人がAWSに手を出し、のんきに過ごして気づいたら、自分のミスで不正利用され$6,000ほどの請求が来ていて」一週間ほど食べ物も喉を通らず、AWS様に泣きついた結果、「なんとか情け容赦を頂いた」という内容です。 本文中には多少ふざけた言葉選びが散見されるかもしれませんが、私は全力で AWSさんに感謝 をしております。 この先、 僕と同じような過ちを犯す可哀想な素人エンジニアを、この世から一人でも無くしたい。 と切に願っております。 最初にお断りしておきますが、 当記事から得られる、プログラミングインテリジェンスは1gくらいです。 一定レベル以

Webサイトのデザインにはいくつかの知っておくべき必要な知識と、それを効果的に使うテクニックがあります。 ページを表示するスクリーンにおける人間の行動原理をもとに、構造の組み立て方、空白スペースの使い方、スクロールの取り入れ方など、レイアウトの知識とテクニックを学べる無料のeBookを紹介します。 Design for a Perfect Screen Book まずは、eBookのダウンロード。 下記ページの「Download It Now For Free」をクリックし、メールアドレスを入力すると、ダウンロードできます。

実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f

この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること　Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・！ デザインに写真を使うときにわたしがよくしていること 「デザインセオリー」というと「これをやればデザインはOK！」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。 グラデーションマスクにこだわってみる メインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。