はてなブックマーク

こんにちは。FASTCODINGデザイナーの七転び八重子です。 はい。また、このテーマを扱う季節になりました。笑 半年ごとに、Webサイトのベストな横幅サイズ（コンテンツ幅）を調べている私です。今回は、ブラウザのサイズ状況と合わせて、国内のメディアサイト・コーポレートサイトを調べてみました。 半年前の記事はこちらをご覧ください。 「【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ」 2022年2月時点のディスプレイ解像度を確認こちらは、半年で大きな変化はないかと思いますが、半年前に比べると、人気のブラウザサイズは割合が高なっていることが分かります。 PCデスクトップでは1920×1080とラップトップでは1536×864が伸びていますね。 モバイル新しいiPhoneの発売などで、こちらは大きく変わるようですが、ベースのサイズはそんなに変わらないですね。 タブレッ

こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 UIの設計手法、OOUI（オブジェクト指向UI）」をご存知でしょうか？ 「使いやすさ」はUI設計の仕方で大きく変わりますが、OOUIは有効な手法であるとされています。 今回はそんな「OOUI」について解説します。 「OOUI」オブジェクト指向UIとは？「UIデザイン」というと、一般的には色合いやタイポグラフィなどビジュアル面を整える事と捉えられがちですが、UX5段階モデルで言うところの構造〜表層までを指し、OOUI（オブジェクト指向UI）は「構造」の領域に当たります。 UI設計は大きく分けて「オブジェクト指向UI」「タスク指向UI」の2通りに分かれます。双方の違いは、タスク（アクション、行動）を起点に設計しているか、オブジェクト（目的のもの•対象物）を起点に設計しているかの違いです。 タスク指向UI・オブジェク

こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年は、フロントエンド開発の需要はますます高くなる見込みです。 フロントエンドのデベロッパーは、一昔前は、HTMLとCSSとjQueryをある程度知っていれば十分でしたが、昨今は、開発のスキルはもちろん、ツール、ライブラリ、フレームワークなど、常に進化し続けているシステムに対応しなければなりません。。。今回はその中で注目すべき「静的サイトジェネレータ」をまとめてみました。 静的サイトジェネレータとは？静的サイトジェネレーターとは、英語名でStatic Site Generator（SSG）と書き、静的なサイトをビルド処理(※)によって生成することができるソフトウェアの事です。Webページのパフォーマンスを向上させ、高速にクライアントへ提供できます。 ビルドとは？ 簡単に言うと「ソースコードにバクがないか解析を行い、問題が

こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？ 私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。 前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？まず、Webサイトをデザインする上で、どのようなレイアウトにするのかを最初に決める必要があります。どのレイアウトデザインも、一長一短あるので、Webサイトの用途に合わせて選択します。最近では、パソコンはソリッドレイアウト、タブレットやSPはリキッドレイアウトを採用しているケースが多いです。 余談ですが、 よくレスポンシブデザインとリキッドデザインを比較するような説明があるのですが、

こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、CSSで実装可能な、背景を斜めに区切ったレイアウトにする方法をご紹介します。 ちょっとした工夫ですが、結構オシャレになっちゃいます。 斜めデザインを利用したサイト背景カラーだけでなく、写真を斜めにしてもオシャレ。単調なサイトに躍動感、スピード感が出ますね。 ①clip-pathを利用した方法4つの頂点の位置をX軸、Y軸の値で指定する方法です。 ブラウザの対応状況は、以下の通り。IEは相変わらずです。。。 では、実践へ .Block { -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); } ②borderを利用した方法セクション間に、bord

こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回マテリアルデザインの実践で「カラーの選び方」をご紹介しましたが、今回は、実践編２「ボタンのルールと作り方」です。 マテリアルデザインでカラーを決めたら、パーツづくりとしてボタンを揃えておくとデザインがスムーズですね。 １　ボタンの種類マテリアルデザインでは、主に５つのボタンを使います。ボタンの重要度によって、使い分けます。 重要度：高　フローティングアクションボタン（FAB）マテリアルデザインらしいボタンの一つです。FABはカラフルで、浮き上がっていています。とても目立つボタンなので、促進したいアクションのためだけに利用してください。 ポジティブなアクションに使うFABは作成やシェア、探索などのポジティブアクションを表します。 次のような使い方は避けましょう。 ✖️ 削除やアーカイブなどのネガティブアクション。 ✖️ 曖昧

こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Web制作のUIデザインツールとして有名な「Sketch」の便利な機能を紹介します。 目次 1）　Sketch（スケッチ）とは？ 2）　Sketchと他のツールを比較してみる 3）　Sketchの便利な機能 － １サイトを１ファイルで作れる軽さ － ワークスペースをページで分けてスッキリ － ちょこっとしたデザインが全てに反映されるシンボル機能 － ボタンや見出しの装飾にはスタイルで共通化 － デザインの共有もクラウドで楽々 4）　まとめ Sketch（スケッチ）とは？Sketchは、Bohemian Codingというオランダの会社によって開発されたベクターグラフィックソフトです。ベクターソフトでありながらピクセル基準で作成することが前提のつくりになっており、WEB制作やUIデザインに特化しています。 さまざまな機能

WEBサイトの引越しの際、忘れてはいけないのが 旧サイトから新サイトへのリダイレクト設定。 旧サイトへアクセスしたら、自動的に新サイトに飛ばしてくれるアレですね。 今回は、リダイレクト設定を行うメリットや実際に使える htaccessの書き方についてご紹介いたします。 目次 1.WEBサイトの引越しでリダイレクトをする理由 2. 301リダイレクト設定はhtaccessで 3. よく使う301リダイレクト書き方5選 4. 参考URL WEBサイトの引越しでリダイレクトをする理由通常WEBサイトを引越しした場合には、旧サイト側に301リダイレクトと呼ばれる 恒久的な転送を意味するリダイレクトの設定を行います。 ですが、何故301リダイレクトの設定する必要があるのでしょうか 理由は大きく分けて２つ。 1.訪問ユーザ対策 WEBサイトを引越ししてすぐの期間は、検索エンジンを利用すると 旧サイトが

Google Maps Platformの利用に必要な、アカウント作成～APIの有効化～Google Maps Platform APIキーの取得・発行～APIキーの指定についてご紹介します。APIキーの設定の確認方法についてもご案内いたします。 ステップ1　－ HTMLの記述①Google APIの読み込み<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}&callback=myMap"></script>上記のsrcにある{APIキー}は、事前準備で取得した自分のAPIキーに置き換えてください。 また、myMapは、地図の詳細を設定するために呼び出すjavascriptの関数名。 こちらについてはステップ3で詳しく説明します。 ②地図を埋め込む場所を指定Googleマップを読み込みたい領域にidを指定すること

こんにちは。FASTCODINGです。 Googleマップといえば、目的地までの道のりを調べたり ストリートビューで回りの様子を見てみたりと、近頃私たちにとってとても身近なサービス。 そんなGoogleマップの中でも、企業サイトやイベントサイトなどのウェブページへのマップ埋め込みに 多く利用されているGoogle MAP APIのサービスが2018年7月16日から大きく変わり、Google Maps Platformに移行します。 期限まで残すところあとわずか。 突然、管理サイトに埋め込んであるGoogleマップが 見えなくなってしまわないよう、きっちり確認しておきましょう。 今回の仕様変更で変わることGoogleマップを埋め込む際、APIキー完全必須にAPIキー必須のアナウンスは、2016年6月には行われていましたが 古いサイトではまだAPIキー無しでも表示が可能でした。 ですが、7/1

2021年、最新のWebデザインの横幅サイズはこちらの記事をご覧下さい。どうも、FASTCODINGディレクターのせりなです。Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？パソコンは何pxで作るの？スマートフォンは何pxがいいの？って聞かれることが多いので、デザインの横幅でもう迷わないための考え方をまとめてみました。基本的な考え方さえ抑えておけば、これから先いろいろな情報が出てきてもばっちりです！ もくじ 　　1. 「Webサイトデザインの横幅サイズ」の結論！！ 　　2. まず、... 人気なのはとても嬉しいことなのですが、WEBを閲覧するデバイスの進化は日進月歩。 去年の常識が今年の常識であるとは限りません！ ということで2018年4月現在、パソコン用のWEBサイトは何pxで作るの？スマートフォン用は何pxがいいの？ 最新のウェブデザイン

FASTCODING BLOGとはFASTCODING BLOG(ファストコーディングブログ)は、コーディング代行の株式会社ファストコーディングが運営する、フロントエンド制作やUIUXに関するメディアです。ウェブサイトの制作のデザインからコーディングまで幅広く役立つ情報、最新トレンド、便利サービスなどを配信しています。

FASTCODING-Vietnamのバックエンドエンジニア、ジアンです。 Webサイトを見ていて「ランダムに記事を読み込む」ページを見たことはありますか？ 具体的にはWebサイトを表示すると 最初はりんごに関する記事が1番上に表示されていたのに 同じページを更新してみたら、次はみかんに関する記事が1番上に来ている このようにページを再読み込みしたら、毎回違う記事が表示されるというものです。 この機能は投稿数が多いブログなどに適しています。 ページを更新すると毎回ランダムに違う記事が表示されるので 記事に対しての読みムラが少なくなり、 まんべんなく色々な記事をユーザに読んでもらうことができます。 今回はWordPressでこの機能を実装してみたいと思います。 WordPressで記事をランダムに表示させる方法まずカスタムページテンプレートを作ります。 下記の2パターン作成したので、お好きな

こんにちは、ディレクターのせりなです。 どのパソコン、どのスマートフォンで見ても同じフォント(書体)で表示してくれて 種類も豊富、使い方も簡単といいところばかりのGoogle webフォント。 そのGoogle webフォントから、独断と偏見でおすすめり30選をまとめてみたので 暇つぶし程度に見て行ってくださいなー！！！ 目次 1. 無機質で今っぽい細めゴシック 2. ひょろっとした脱力系フォント 3. スタイリッシュな王道Webフォント 4. 意識高い系女子のための、意識高い系Webフォント 5. お菓子の包装紙にありそうなsweets系Webフォント 6. 古書に出てきそうなアンティーク書体 7. スケッチみたいな温もりのあるWebフォント 8. 手書きのサインみたいなゆるゆる系のWebフォント 9. 今にも物語がはじまりそうなWebフォント 10. 遊び心いっぱいの個性派Webフォン

こんにちは、ディレクターのせりなです。 HTMLで問い合わせフォームなんかを作るとき用に セレクトメニューの中身をサクッとコピペできる、とーーーっても便利な一覧を作りました！ 私は平和主義なので、ひとり占めしないでみなさんにも共有します。 よくある生年月日や都道府県、困りがちな業種選択まで 10種類ほど揃えてみたのでどうぞご活用ください。 目次 1. 西暦 (1900-2030年) 2. 月 (1-12月) 3. 日 (1-31日) [ 番外編 ] 日付選択・カレンダー 4. 年齢 5. 数字 (1-99) 6. 都道府県 7. 職業 8. 業種 (簡易版) 9. 業種 (詳細版) 10. 担当業務 関連リンク ※ 各コードは、余白部分でダブルクリックすると全選択できます！ 1. 西暦 (1900-2030年)　年 <select name="year"> <option value=""

こんにちは、ディレクターのせりなです。 2017年2月1日(水)にWordPressのバージョン4.7.2が公開されましたね。 WordPress 4.7.0～4.7.1で、REST APIの処理による脆弱性が存在しているとの発表がありました。 この脆弱性が悪用されると、遠隔操作によってWordPressの投稿内容を改ざんされる可能性があるとのこと。 「すぐにWordPressを更新してください」と様々なところで言われますが ちょっと待ってください！！！ WordPressのバージョンアップによってWordPressに不具合が起きる可能性があることをご存知ですか？ 携帯のOSアップデートと一緒で、更新には何かとリスクが伴います。 脆弱性・情報改ざんと聞いて動揺してしまう気持ちはわかりますが、5分だけ私に時間をください！！！ まずは、次の2項目だけ読んでみてください。 ・WordPressの

こんにちは、ディレクターのせりなです。 これからプログラミングを勉強してみようかな！っていうエンジニア志望の人や 自分はWebサイトを作らないけど、エンジニアが何やってるのか知りたい！ っていう営業さんやデザイナーさん向けに 『HTML、CSS、JavaScriptの違いと役割について』ご紹介します。 Webサイトをつくりたいけど、HTMLって何なの？ Web業界の営業をやり始めたけど、 Webサイトって実際どうやって作ってるの？ などなど。 『コーディング？何それ初めて聞いた！』くらいの 超初心者さんにもわかりやすい記事になっているので読んでみてください。 HTML、CSS、JavaScriptの役割は人間の顔に例えると簡単に覚えられる！さっそくですが、Webサイトを構成している主な要素についてご紹介していきます。 まず、Webサイトを作ろうとおもったら 以下の3種類の要素を順番に覚えて

こんにちは、ディレクターのせりなです。 このページにたどり着いたあなたはきっと クライアントにRetinaディスプレイに対応したWebサイトを作ってって言われたけど 「すみません、”れてぃーな”って何ですか？」 「あー、あの綺麗に見える画面のことね！・・・TVの話？」 「Retina対応って言うけど、何をどうすれば対応できるの？」 って思っているWebデザイナーさんではないでしょうか？ 世の中では一般的になりすぎて、今更ひとに聞けないRetinaディスプレイと そのWebデザインを作るうえで注意すべき点をまとめたのでご覧ください。 目次 1. Retinaディスプレイとは 2. Retinaディスプレイでデザインするときの設定方法 1. Retinaディスプレイとは最近よく耳にするRetinaと言う言葉。そもそも何なのこれ？ Retina Display(レティーナ ディスプレイ) 「Re

こんにちは、ディレクターのせりなです。 Webフォントって聞いたことありますか？ 最近はそれなりに普及してきたんじゃないかなと思うのですが まだまだ知らない人の為に、今日はとっても簡単で便利なWebフォントの 使い方とメリット・デメリットをご紹介します。 目次 1. Webフォントとは 2. Webフォントのメリット・デメリット 3. Webフォントの設置方法は2パターン 4. Google web fontsを使ってみよう！ 5. 関連サイト 6. さいごに 1. Webフォントとはみなさんが普段見ているWebページに使われている”文字” この文字の種類について考えたことはありますか？ 実は、使っているパソコンのOSやスマートフォンの端末によって 見えている文字の書体(フォント)って違うんです。 Webサイトを構築するときに特に何も設定していないと、 パソコンはそれぞれ自分が最初から持っ

こんにちは！ディレクターのせりなです。 レスポンシブサイトを制作するうえで、 パソコンにはパソコン用に、スマートフォンにはスマートフォン用に 違うデザインの画像を使いたいことってありますよね？ いっぱいCSSを書いたり、不慣れなJavaScriptを使ったり 世の中には難しい方法が沢山ありますが・・・ なんかどれもよくわかんない。もーヤダ！っていうあなたに朗報！ 私が知っているなかで1番シンプルかつ使いやすい方法をご紹介します！ 今日からはもうレスポンシブ対応で悩まなくて大丈夫です！ レスポンシブサイトの画像切り替えのデモレスポンシブ用の画像切り替えデモは下の画像をご覧ください。 DEMO パソコンだと水色の画像が見えていて、 スマートフォンだとピンクの画像が見えていますか？ パソコンから見ている方は、ブラウザのサイズを小さくしたり 大きくしたりすると、途中で画像が切り替わるかと思います。

Webページの表示速度が遅いと悪いことだらけ果たしてページの表示速度の改善は、SEO対策のためだけなのでしょうか？ 答えは否、私はページの表示速度は[ ユーザビリティの向上 ]のためにあると思っています。 ”Amazonの調査では、ページの表示速度が0.1秒遅くなると、売り上げが1%低下することが明らかになった。 Googleからは、ページの反応が0.5秒遅くなるとアクセス数が20％低下すると発表されている。 さらに米Aberdeen Groupの2008年の調査では、スピードが1秒遅くなるとページビューが11％、コンバージョンが7%、顧客満足度が16%低下することが報告されている。” 引用：Webサイトのレスポンス速度から見るインターネットユーザーの閲覧行動と企業の課題 ページの表示速度が遅くてイライラしてしまうサイト、ありますよね？ 私も気長なほうではないので、読み込みが遅いページはす

こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた