GitHub - Tokyo-Metro-Gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force websiteYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
半構造化インタビューでユーザーを知るために活用したいインタビューシートの作り方
Gaji-Laboでお手伝いする新規事業案件やサービスデザイン案件では、インタビューを実施する機会があります。そうした場合には特に半構造化インタビューをおすすめすることが多いのですが、新規事業を成功させるためのインタビューとして行うなら、事前の準備がとても大切。 今回はGaji-Laboがインタビュー実践の際に活用しているシートを紹介したいと思います。実際に実践する中で必要なものをひたすら詰め込んできたシートです。 インタビューのためのシートを作って活用する新規事業に取り組むチームには「チームにまだ専任のリサーチャーがいない」「役割に関わらず全員でユーザーの声を聞きたい」など、様々な事情があると思います。Gaji-Laboがお手伝いするチームでは、インタビューのスキルレベルがまちまちでも成果を上げられるよう、共通のシートを作って活用します。 スプレッドシートの形で用意すると便利ですシートの
ホットリンクのサイトリニューアル戦略資料を公開（8,000字の解説付）｜#ホットリンク
最終更新日：2019年12月20日 どうも、ホットリンクCMOの飯髙です。 2019年12月16日に、弊社（ホットリンク）のコーポレートサイトをリニューアルしました。 このリニューアルは、BtoBに強いWeb制作会社である株式会社ベイジさんにお願いしました。目に見える変化はもちろん色々あると思いますが、ここでは見た目だけでは分からない、サイトリニューアルの検討プロセスや背景にある意図などを、ベイジさんが作ったサイト戦略資料を元に、詳しく解説していきたいと思います。 ※全スライドはページの最後に掲載しています。 ※当記事はベイジの枌谷さんとの共同制作です。 ※提案資料は提案当時のものをあまり変えず公開しています。古い情報や誤字脱字などが含まれているかもしれませんが、ご了承ください。 旧サイトの課題とベイジさんを選んだ理由 リニューアル前の私たちのコーポレートサイトには、主に以下のような問題が
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
Nuxt.js + Netlifyで爆速構築するサーバーレスSPA開発入門
概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニア(以下、FE)をやっています、かめぽんです。 最近、VueもNuxtも勢いすごくないですか？？ すごいですよね？！？！ そんでもって、FirebaseやAWSを使ったサーバーレスアーキテクチャのアプリケーションも増えてきていますね！ だけど、「覚えること多くてよくわからん！けど、なんか動かしてみたい！」 と、思う方もいると思うのでぜひこの記事を参考にしていただけたらと思います。 サーバーレスSPAの構築方法はたくさんありますが、まずは手軽にモダンフロントエンド周りの知見をインプットしつつ、Nuxt.jsとNetlifyを用いてサーバーレスSPA環境を爆速で作っていければと思います！ ターゲット 手軽かつ本格的にサービスorサイトを公開してみたい人 FEもしくはFEになりたい人 サーバーレスを手軽に爆速で体験してみたい人 PW
ドキュメントサイトの管理にはNetlify＋静的サイトジェネレーターが便利 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！開発部テクニカルコミュニケーショングループの仲田（@naoh_nak）です。 最近WeWorkみなとみらいに出没し始めました。おしゃれ過ぎて少し落ち着かないのですが、慣れたら自分もそちら側の人間だと思うようになるのかもしれません。 前回はヘルプサイトをマークダウンで制作する話をしました。そのサイトのホスティングにNetlifyを使うことでいい感じに制作プロセスを回せているので、今回はその話をします。 Netlifyもう使ってるよ！という方には今更の内容かもしれませんが、ブログなど小規模なサイトの運用に使っているケースが多いのではと思います（ネットにある情報を見る限り）。サイボウズのヘルプサイトは1万ページを超え、日英中3言語で運用しています。このような大規模なサイトでの運用例としての参考にもなれば嬉しいです。 Netlifyとは Netlifyって何？って方もいますよね。Net
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
jQuery Notebook - 見ているWebページをそのままに編集 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました まさにWYSIWYG！ 一般的にCMSを構築した場合、訪問者の見る画面と管理者の画面は分かれています。管理上、その方が分かりやすいのですが、管理者にとっては編集した内容がどのように表示されるかが掴みづらいのが難点です。 そこで最近では訪問者の見たままにWebサイトを編集できるCMSが増えていますが、同じような機能を独自のシステムにも追加できるのがjQuery Notebookです。 jQuery Notebookの使い方 jQueryプラグインだけあって使い方は簡単です。 <div class="my-editor"></div> $(document).ready(function(){ $('.my-editor').notebook(); }); これで完了です。続いてデモを
Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現) - kojika17
置換前の文字と検索、置換の対応 特定の文字からHTMLを作成 (.*)と$による呼び出しを覚えれば、様々なことに応用ができます。 下記の文字から、HTMLのリストを作成してみましょう。 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing https://www.bing.com/ Yandex https://www.yandex.com/ 百度 http://www.baidu.com/ 用意した文字は「タイトル」「スペース1つ」「URL」というルールになっています。タイトルとURLを(.*)に置き換えて検索し、li要素とa要素に置き換えます。 例 置換前の文字 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing ht
Web制作者は要チェックです！新バージョンのnormalize.css V4はモダンブラウザ・スマホ・HTML5に完全対応 | コリス
2016年3月19日に、モダンブラウザ、スマホ、HTML5に完全対応した「normalize.css」の新しいバージョン「normalize.css v4.0.0」がついにリリースされました！ v3から細かい改良が重ねられたv4で定義されている各スタイルが、どのように機能しているか紹介します。 normalize.css normalize.css -GitHub Changes to normalize.css normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 normalize.cssの特徴 normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小
フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
Webページ、本や雑誌、ポスターや看板などで見たフォントを使いたいけど、そのフォントが何か分からない時ってありますよね。そんな時にはフォントを画像から、フォントの特徴からそのフォントが何か検索できる無料サービスを紹介します。 日本語のフリーフォントのまとめも参考にどうぞ。 2022年用、日本語のフリーフォント 609種類のまとめ フォント名が分からない日本語フォントを検索・自動判定 Adobeやダイナフォントやタイプバンクの有償日本語フォントをはじめ、青柳衡山フォントやみかちゃんフォントなど無料日本語フォントまで、日本語フォントを検索できます。 Identifont -形状別フォント 識別名称別フォント検索 対応フォント 日本語・英語 対応フォントは、書体メーカー一覧をご覧ください。 検索方法 形状別・名称別・スタイル別・類似・絵文字・メーカー別 使い方は簡単で、名前が分からないフォントの
5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイント
こんにちは。株式会社FREE WEB HOPEの代表取締役社長 相原 祐樹です。Webマーケティングは、やるべき事や覚えなきゃならないことが沢山あります。何か調べ物をしようとした時に情報が抽象的だったり、概念的だったりと最終的には調べることに疲れてしまった……なんて経験はありませんか？ 僕はいつも思っていました。 「考え方やマインドセットはいいからやり方を教えほしい」ということを。 そこで、もう自分でWebマーケティングで中小企業がやるべき事を時系列でわかるようにまとめてしまおう思い、「中小企業が今すぐ出来る 実践！WEBマーケティング大全（全116ページ！）」を執筆しました。 実際に僕の会社が設立から4000万/1億/3億/5億(たった8人で)と毎年伸び続けてこられたWebマーケティングに関する5年分の情報を全て整理して分かりやすく解説しています。 本記事では、その中から弊社の得意とする
おすすめデザイン入門書10選 : could
たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を
「よく分かる公開鍵認証」～初心者でもよくわかる！VPSによるWebサーバー運用講座(2) | さくらのナレッジ
以上の特徴を踏まえた上で、それでは実際に秘密鍵、公開鍵の鍵ペアを作りましょう。 Macの場合の公開鍵認証のやり方 ターミナルを開いた状態では、現在のパスはユーザーのホームディレクトリ( /Users/(ユーザーID) )になっていると思います。 ls -a コマンドでファイルのリストを表示し、もし .ssh ディレクトリが無ければ作成してください。 ディレクトリのアクセス権限は本人しか読み書きできない権限(700)にします。 $ mkdir .ssh $ chmod 700 .ssh .ssh ディレクトリに移動し、ssh-keygenコマンドを実行して秘密鍵と公開鍵のペアを作ります。 パスフレーズは自分が決めた適当な文字列を使用してください。 $ cd .ssh $ ssh-keygen Generating public/private rsa key pair. Enter file
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
【デザインまとめ】綺麗なデザインの管理画面 30選
以前記事にした「【デザインまとめ】綺麗なデザインの管理画面 40種類 」、時間が経ってリンク先が消えていたりしますね。 また綺麗なデザインの管理画面も追加したいと思います。 サムネイルだけで見ると、全部似たようなものに見えてきますが、デモサイトを見てみると細かな部分でデザイナーさんの個性が出ていて面白いです。 ご参考になれば幸いです。 左に紺か黒のナビがあるやつ ◆Material Admin デモサイト ◆Edumix 黄緑がきれい デモサイト ◆Make デモサイト ◆Con デモサイト メガネのロゴがかわいい ◆Mega デモサイト 黒でメリハリ ◆Admin box デモサイト ちょっとレトロ感ある色遣いが印象的。 ◆Singular デモサイト やわらかな色遣い。 ◆Azan デモサイト ◆Brio Web App デモサイト 丸みの強い要素がかわいい ◆HeyMetro デモサ
デザイナー必見！！ 女性向けWEBサイトデザインのポイント（2）装飾編 | 津田祐典 | 街角のクリエイティブ
前回は、女性向けWebサイトデザインにおける「配色」のバリエーションについてご紹介しました。今回は、見出し等における細部の「装飾」に絞っていくつかのパターンをご紹介しようと思います。 手書き、アナログ風 女性向け（に限らないですが）、手書き風の文字やかすれた線を用いたアナログ的アプローチは、柔らかい雰囲気を出すオーソドックスな手法の一つです。 かすれた線 出典：サロンドパルール 出典：LEWE market かすれた感じの見出しや囲みの線で、アナログ感を表現。普通の直線を消しゴムツールで適当に削るだけでもできてしまうので、比較的難易度も低いです。また、フォントはゴシック体よりも、線幅が不均等な明朝系の方が馴染みやすいですね。 にじんだボタン 出典：フェリシモ 500色の色えんぴつ 出典：やさい あまうま ル・クルーゼ エッジが少しにじんだようなデザインのボタン。ボタンは必然的に目立つような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Fundamentals — Google Developers
