デザインデータとコードを一体のものとして捉える - Qiita
発表の際に使ったスライドと台本をそのまま記事にしています。 そのため、表現が口語的な部分もありますがご了承ください。 できるだけ、Web でもネイティブアプリでもクロスプラットフォームでも共通する話にしようと思っていましたが、筆者の知識が Web に偏っているので内容も Web 寄りです。 自己紹介と導入 みなさんこんにちは。 株式会社エイチームのグループ会社である、Qiita株式会社でデザイナーをしている、綿貫佳祐といいます。 プロダクト開発部というデザイナーとエンジニア混合の部署で部長をしています。 こういった出自もあり、製品開発においていかにデザインとエンジニアリングを上手く紐づけるか？について今日はお話します。 「デザインデータが完成したけど、いざ実装しようと思ったらとても大変な内容だった」 「ビジュアル上のこだわりが、実装者にどうしても上手く伝わらない」 こんな悩みを持っている人
【2017年度版】Webエンジニアでも最低限押さえておきたい、SEO施策のまとめと実装 - Qiita
Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をインプットすることをおすすめします。 ###★この記事を読むとどうなるか マーケター、ディレクターとのやりとりがスムーズになる。 意図せず検索順位を下げてしまうコードに気づける様になる。 エンジニア側だけで動けるSEO施策を提案できる様になる。 なんとなくSE
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
Webサイト制作を正しくディレクションする際に、最低限認識を合わせておくべき15のチェック項目 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、Webディレクターとしての業務をこなすことが多いこの頃です。 以前はエンジニアとしてプロジェクトに関わっていたのでコーディングに集中できたんですが、あれですね、ディレクターってやること多いですね。 作業範囲も広く、クライアント含めコミュニケーションを取る相手も多いため、意外と当たり前なことを決め忘れてしまったり、メンバーに伝え忘れてしまったり……なんてことは起きないようにしたいものです。 そこで今回は、Webサイト制作案件においてプロジェクト開始時にこれだけはクライアント＆メンバー全員と認識を合わせておきたい15のチェックリストを作ってみました。 Webディレクションを始めたばかりの方は、ぜひ参考にしてみてください。 Webサイト制作をスタートさせる際に、最低限認識を合わせておくべき項目15 1.
初心者の為のGoogleアナリティクスを図解で説明した完全マニュアル｜魂を揺さぶるヨ！
こんにちは、ユレオです。 数多くのブログがある中、当ブログ「魂を揺さぶるヨ！」を閲覧いただきありがとうございます。 本日この記事を読むために訪れた方はブログを始められたばかりの方か、ブログを始めてみたがGoogleアナリティクスをあまり利用されておらず、使い方を確かめたい方ではないでしょうか。 Googleアナリティクスを始めるには覚えることが多いですが、すべての機能を覚えないといけないわけではありません。 必要最低限の「これだけ覚えておけば便利に使える」という機能があり、それらを覚えた後に必要であればもっと深く勉強するというのが効率的かと思います。 そういった方のために、本日は「初心者の為のGoogleアナリティクスを図解で説明した完全マニュアル」として詳しく説明していきたいと思います。
検索結果ページにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 検索とは、ユーザーとシステム間の会話のようなものです。ユーザーは必要な情報をクエリとして表現し、システムはその返事として検索結果を提示します。そのため検索結果ページは、検索体験において非常に重要な部分です。検索結果ページはユーザーの情報のニーズを導き出して会話を成立させる機会を提供するものなのです。 この記事では、検索結果のUXを向上させる10のベストプラクティスを紹介したいと思います。 １. 検索ボタンが押されたあとユーザーのクエリを消去してはいけない オリジナルテキストは残したままにしてください。クエリの再構築は、数ある情報探索においてとても重要な段階です。探している情報が見つからない場合、ユーザーは元のクエリを少し修正して再び検索しようとします。これをユ
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
2020年まで使えるfont-familyおすすめゴシック体 - Qiita
新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン
head内に書くべきタグを総まとめ：SEO対策に有効なものは？
HTMLのheadタグとは？ みなさんが普段ネットサーフィンするときに見ているWebページはHTMLにより作られています。HTMLは、大きくheadと、bodyに分けることができます。 head：<head>...</head>ではさまれた部分。訪問者に直接は見えないタグを入れる body：<body>...</body>ではさまれた部分。訪問者に見える部分がここに書かれる 皆さんが今この瞬間に見ているこのページの文字や画像は、bodyタグ内に書かれています。 headタグ内には、検索エンジンやブラウザに情報を提供したり、指示を出したりするためのタグを書きます。調べない限り、訪問者の目には触れません。 headタグ内には主にmetaタグとlinkタグを入れる metaタグと呼ばれるものをheadタグ内に書くことで、文字コードの指定や、ブラウザでの表示のさせ方、検索エンジンへのインデックス（
SEO検索エンジン最適化チュートリアル
サイトやページのコンテンツを読みやすく、わかりやすく、使いやすく、そして美しくすること、つまり良好なユーザーエクスペリエンスを提供することは、デザインが担う重要な役割であり、人間のユーザーに対して有効であるのと同様に、SEOにも有効に働きます。 SEOに強いWebデザインの基本ターゲットユーザーの設定はWebデザインに欠かせないプロセスです。そのターゲットユーザーのひとつに検索エンジンを加えることで、WebデザインはSEOフレンドリーになります。現在の検索エンジンは、人間のユーザーと同じようにサイトのユーザーエクスペリエンスを評価するからです。 ウェブサイトは利用者の便宜のために構築するべきであり、すべての最適化はユーザー エクスペリエンス向上のための調整である必要があります。検索エンジンもそうした利用者のひとつであり、他のユーザーがあなたのコンテンツを見つけるための手助けをしています。
検索エンジン最適化（SEO）スターター ガイド
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 検索エンジン最適化（SEO）スターター ガイド ウェブサイトの構築時には、ユーザーを念頭に置き、見つけやすく閲覧しやすいサイトになるよう工夫するのが普通です。検索エンジンもユーザーの一種ですが、コンテンツを見つけるためにユーザーの手助けをします。SEO（検索エンジン最適化）では、検索エンジンにコンテンツを理解させることで、ユーザーが検索エンジンからサイトを見つけてアクセスすべきかどうかを判断できるようにします。 検索の基本事項では、ウェブサイトが Google 検索の表示対象となるために特に重要となる事項を説明しています。Google のインデックスに確実に登録される方法はありませんが、検索の基本事項に沿って作成したサイトは Google の検索結果に表示されやすくなります。SEO とは
入門者向け alt属性の書き方アドバイス
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
【保存版】Google Search Console（サーチコンソール）を使って、サイトを改善するためのガイド ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
ニール・パテル氏によるサーチコンソールを使いこなすためのマニュアルとなります。 昨年ご紹介させていただいた同氏のサーチコンソールに関する記事と比べ、より「出来ることベース」でのアプローチとなっており、また各項目をさらに深堀りしているという点で異なった観点の内容となっております。昨年の記事をご覧いただいた方でも、復習にお役立ていただける内容となっております。– SEO Japan サイトのコンバージョンとリードを最適化することは、ビジネスにおける最高の投資のうちの一つだ。 滞りなく運営され、コンバージョンを生み出すウェブサイトは、いざと言うときビジネスの助けになる。 しかしこれは簡単ではない。コンバージョンは勝手に生じるわけではないのだ。 ありがたいことにGoogleは、サイトが欠いている、あるいは苦労していることに取り組む助けとなる無料のツールを用意している。 例えば、Googleのサーチ
「GoogleAnalytics見てアクセス解析して」って言われた時にまずしていること - Qiita
はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ
Web廃墟を作るときに心がけるべき7箇条 - Qiita
お初です！ ホームページを作り始めたウエンツといいます！ 普段はエンジニアをやっています。 最近ふと思い立ってホームページを作り始めました。 ■わたしのホームページ http://2nd.geocities.jp/ssd_kfk/ するととっても楽しく、自由に溢れていることに気が付きました。 仕事でウェブサイトづくりにまみれている中、様々なルールや常識に縛られかつて熱中したホームページづくりのの自由を忘れているのでは？と感じました。 この楽しさを、みんなに楽しんでほしいと思い、このホームページを作っていくにあたって、心がけている、または心がけたこと事をまとめました。 皆さんのホームページ作りを再度始める切っ掛けになれば幸いです。 必要なもの ジオシティーズのアカウント html4の知識 懐かしむ心 30超えた年齢 各種心得 仕事でやってるいつもどおり作ってしまうと、廃墟ではなく普通の家がで
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
【制作会社向け】Webサイト納品前に確認したいチェックリスト | 株式会社PLAN-B
デザイン、コーディングが完了し、いざサイト納品！と、その前に大切な納品前チェックを行います。デザイン通りにコーディングできているか、リンク切れはないか、などサイト納品前のチェックは、特に注意深く行います。 ディレクターはもちろん、デザイナー・コーダーとともに行う厳しいPLAN-Bのチェック項目をご紹介します。納品データの精度を高めたいと考えておられるWebディレクターの方はぜひ参考にしてみてください。 デザイン周辺のチェック項目デザインチェックFixしたデザインとコーディング後のキャプチャを重ね合わせて、デザインを忠実に再現できているか確認します。文字サイズ・太さはもちろん、文字間隔や余白など、隅々まで厳しくチェックします。 表記チェック表記ゆれがないか、スペルミスがないかをチェックします。クライアント様ご指定の表記ルールがある場合は、特に注意深くチェックします。 ダミーチェック制作過程に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google 検索 - Google 検索の仕組みを確認する
