サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
b-risk.jp
Google Fontsのサービスなど、最近では無料で使えるフォントも増えてきました。 しかし、数もかなり多くどんなフォントを使えばいいのか迷ってしまいますよね。 今回はWebデザインの現場からよく使う定番のフォントをご紹介いたします。 よく使う日本語フォントゴシック体まずはベーシックなゴシック体から見ていきましょう。 Webデザインではディスプレイでの可読性からゴシック体の方が多く使用される傾向にあると思います。 ヒラギノ角ゴシックデバイスフォント | 無料 角ゴシック | ヒラギノフォント macOSおよびiOSに標準搭載されているフォントです。 カッチリとした安心感のある読みやすい書体ですね。 Windowsでの使用の場合はダウンロード製品を購入するか、もしくはモリサワのフォントライセンスを購入することで使用可能です。 游ゴシックデバイスフォント | 無料 字游工房|JIYUKOBO
HTMLメールの作り方!デザインからコーディングまで押さえておきたいポイント【サンプル付き】 更新日:2020/02/05 みなさん、HTMLメールを作成したことはありますか? テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょうか。 しかし、HTMLメールにはかなり制限が多く、実装には非常に手間がかかります。 そこで今回は、HTMLメールを作成するにあたって注意したい点を、実際にデザイン~コーディング、テスト送信まで行ってご説明していきたいと思います。 【目次】 大前提!まずはこれを守ろう デザイン時に気を付けること こんなデザインは難しい メーラーやブラウザでの違い 実際にデザインしてみた コーディング時
TOPブログコーディングをより効率的に!楽にHTMLやCSSを生成できるジェネレータ8選(おまけあり)【2020年度版】 「毎回テーブルタグ書くの、面倒くさい…」と思った経験はありませんか? Webエンジニアにとって、サイトを作るときには必ずコーディングをおこないますが、いろいろなサイトを作っていても共通して出てくるパーツは意外とありますよね。ただ、都度入力していくのは時間もかかって骨も折れる作業です。 ということで、今回はこれまでのコーディングで実際に使ってきた、より速く作業をおこなえるようなWebサービスをまとめました。コーディングに慣れていない人はもちろん、同じようなタグをサイトごとに書くのが大変だと感じてきた熟練者の方にもおすすめです。 目次 テーブルタグ自動生成「Table Tag Generator」三角形自動生成「CSS Triangle Generator」画像を好きな形に
コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっています。より理解しやすいようコードを丸っと貼っておりますので、記事が長くなっています。予めご了承ください。また、今回の記事に登場するフッターは、以下のデモページより確認していただけます。こちらも合わせてご覧ください。 Footer DEMO ロゴとメニューが縦に並んでいるフッター【難易度★☆☆】横並びを縦並びにするテーブルレスポンシブ【難易度★☆☆】ロゴとメニューが横並びで、子メニューがあるフッター【難易度★★☆】メニューが多いフッター【難易度★★★】会社概要エリアとメニューが50%ずつ並んでいるフッター【
ソリッドレイアウトでは要素のサイズがpxなどで固定となるのに対して、リキッドレイアウトでは%やvwなど画面幅に対して流動的に変化します。 そのため特定の幅以下になると、ソリッドレイアウトでは横スクロールバーが出てくる場合があります。リキッドレイアウトでは横スクロールは発生しません。 横スクロールが発生すると操作性が悪くなるので、ソリッドレイアウトの場合は、横スクロールが発生しそうになったらブレイクポイントを設定してレイアウトの切り替えを行います。 リキッドレイアウトだとレイアウトの変更はあまりなく、メニューがハンバーガーになる、画像がPC、タブレット向けからスマホ向けに切り替わるくらいの変更にとどまるでしょう。 リキッドレイアウトのメリット・デメリットそれではソリッドレイアウトと比べた際の、リキッドレイアウトのメリットはなんでしょう。デメリットと併せてお伝えします。 メリットどんな画面幅で
「スライダーを実装したい!」「でも何を使えばいいの?」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし!(かもしれません。) 目次 slick(スリック)とはslickの使い方~導入編~slickの使い方~実践編~slickの使い方~カスタマイズ編~slickの使い方~レベルアップ編~slickの使い方~もっとレベルアップ編~slickの使い方~まとめ~slick(スリック)とはslickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。 また、商用の利用もOK(※ちょっぴ
【AdobeXD】グループの上からでもアウトライン化(パスに変換)できるプラグインを作った話 更新日:2019/12/26 Webデザインといえば、今まで「Photoshop」「Illustrator」「Sketch」といった感じでしたが、昨今の「AdobeXD」の普及により、弊社でもXDで作成されたデザインを扱う機会が増えてきました。しかし、まだまだ発展途上のXDでは痒いところに手が届かない部分が多いのも事実です。 そこで、今回はXDで個人的に使い勝手が悪いと思っている「パスのアウトライン化」についての記事になります。 Contents XDのアウトライン化は面倒くさいXDにアウトライン化を便利にするプラグインは無かった今回の目標:グループの上からでも「パスに変換」を実行01「manifest.json」と「main.js」を理解しよう02jsで選択してアウトライン化する処理03vue.
今回は余白についてデザイン初心者さんや学生さん向けにご紹介したいと思います。 皆さんは余白とどう付き合っていますか? デザインするうえではかかせない存在の余白。なんとなく…といった感覚で使っていると違和感のあるデザインや 情報を正しく受けとってもらえないデザインになってしまいます。 余白の効果を存分に使ってよりよいデザインを作るために余白の効果と使い方などを紹介していきます! 【目次】 余白の効果とは?情報の干渉を和らげる情報をわかりやすく!印象を操作できる余白を使うときのルール!コンテンツのまとまりを意識するコンテンツの上下余白を決める行間・文字間を考えるまとめ 余白の効果とは?「余白」とは「ホワイトスペース」(white space)やCSS内では「マージン」(margin)「パディング」(padding)と呼び、構成の中で何も配置されていない領域のことをいいます。 余る白と書いて余白
【WP】自前のCSVインポート処理の決定版。大量データや多数のカスタムフィールドにも対応。 更新日:2019/10/07 WordPressにCSVデータをインポートするために様々なプラグインがありますが、要件に応じた柔軟な対応は難しいものがあります。 例えば、「社内で管理している商品番号をキーにしたい」や「基幹システムから出力したCSVを毎日自動で取り込みたい」や「管理画面から『上書き禁止』設定をしたものはCSVインポートで上書かない」などなど。 こういう要件に関してはプラグインをカスタマイズをするよりも、自前でのCSVインポート処理を作ってしまうのが良いと思います。 そんなに難しくありませんし、とても柔軟に作ることが出来ます。 この記事では以下の流れで解説します。 CSVファイルのアップロード処理インポート処理用のPHP作成大量のデータや処理でメモリが足りなくなるケース対応非同期処理で
コーダーの皆さんはコーディングする際に使うCSSはある程度決まっているのではないでしょうか。 僕自身、使いどころは異なっていても、使用するプロパティなどは大体いつも同じものの組み合わせであることが多いです。 そこで、今回は少しだけ視点を変えて普段あまり触れる機会は多くないけれど、 うまく使えばコーディングがちょっと便利になる、そんなユニークで面白いCSSをご紹介します。 頭の片隅で覚えておいて損はないはずなので、是非皆様の参考になれば嬉しいです。 【目次】 文頭に数字を連番で自動出力するCSSテキストの大文字・小文字・全角文字を変換するCSSテキストに圏点を入れるCSS要素の形に合わせてテキストを表示するCSS要素をクリッピングマスクするCSSinputの数値の範囲の判定後に装飾するCSSカーソルを自分好みにカスタマイズできるCSS要素に変化を与えるCSS1文頭に数字を連番で自動出力するC
脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】 更新日:2019/08/16 突然ですが、あなたはコーダーですか?それともWebデザイナー? そして、あなたはどのくらいコーディングに自信があるでしょうか? え?「自分デザイナーなんでコーディングとか関係ないし!」という人、ちょっと待って! まだ「戻る」ボタンを押さないでください!! コーディングとデザインはWebサイトでは自転車の両輪のようなものでして、よいコーディングができればよいデザインができるように、よいデザインができればよいコーディングができるのです。 弊社でも「すごいな」と思う人はよいコーディングができ、よいデザインを作ってくれます・・・! そんなわけで今回はHTML・CSSでコーディングできるもので、コーディング初心者がつまづきやすい例を筆者の実体験に基づきご紹介します。 これを読めば「なん
Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA(シングルページアプリケーション)で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 Contents Nuxt.jsについて導入方法シンプルでシームレスなページ遷移SPAを使用するメリットとデメリットサイト紹介まとめNuxt.jsについてSPAを構築するにあたり、今回はJavaScriptライブラリ(以下jsライブラリ)のフレームワークを採用することにしました。jsライブラリは有名なものだと「React」や「Vue」などが該当しますが、今回は「Vue」のフレームワークである「Nuxt.js」を使用します。 Nuxt.jsはVueアプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中か
TOPブログ【WordPress】クライアント目線で使いやすく!管理画面カスタマイズのポイント8つと対応方法まとめ WordPressのカスタマイズをしていくと、機能が多くなればなるほど管理画面がごちゃごちゃしてきます。 制作する側は慣れたものですが、実際に更新・投稿をするクライアントの視点で見ると、実は不親切設計になっているかも知れません。 そこで、今回はクライアントが使いやすい・ミスしにくい管理画面にするためのポイントを8つご紹介いたします。 【目次】 必要ないメニューを出さない、触らせない 管理画面の不要なメニューを削除管理画面用のCSSを記述して調整勝手にWPのバージョンを更新させないAll in one SEO packの不要な入力枠を削除ユーザーの権限を分ける 何の機能なのか伝わりやすいように工夫する メニューアイコンを設定するカスタムフィールドの設定内容をわかりやすくする「ア
【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理! 更新日:2024/08/15 仕事中よく使うサイトや参考になるブログ記事は家で見返したいが、いちいち自分のスマホにURLを送るのは面倒! ブラウザのブックマーク機能は物足りない! 出来れば1つのサービスでブックマークを管理したい! 参考サイトをまとめたブックマークを共有したい! …というわがままな欲望を叶えてくれるサービスがありました。 今回ご紹介する「raindrop.io」ではこんなことが出来ます アカウント登録でどのブラウザ・スマートフォンからでも追加・編集・確認が可能iOS・androidアプリ有chromeの拡張機能で現在見ているページを即座に追加可能フォルダ分け、タグ付け機能、ソート、検索機能付き一覧表示をカスタマイズ可能ドラッグアンドドロップで並び替え可能テーマ(ダークモード等)
APNGでイラストやアイコンを動かそう!~AdobeAnimateの使い方~ 更新日:2024/08/15 イラストや写真を動かして、Webサイトで見られるアニメーションといえばGIFアニメーションですよね。 ですが、近頃GIFアニメーションに代わる新しいAPNGという形式が現れました! 今回はこのAPNGについてと簡単にアニメーションを作成の過程をご紹介したいと思います。 APNGとはAPNGとはアニメーションPNG、エーピングと読みます。 簡単に言うとアニメーションするPNG画像のことです。 実は、APNGは2004年に作成されたので以前から存在しておりましたが、作成から3年後、公式から仕様に含めないとされていたり、Webブラウザで対応しているのがFirefoxだけだったり…と近頃まで日の目を見なかったものでもあります。不憫。 現在はほかのWebブラウザでも対応できるものが増えてきて、
「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし!この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke
【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか 更新日:2020/01/09 Adobe Creative Cloud(以下 Adobe CC)に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォントだけでなく、モリサワやフォントワークスの日本語フォント等も多く提供されており、 常用漢字・各種フォントウェイトに対応しているものが多く、デザイン面で重宝します。 筑紫A丸ゴシックにはよくお世話になっています! そしてなんと、これらのフォントはWebフォントとして使用することが出来ます。 使用にあたり、埋め込むWebサイトのPV数制限もないため非常に有用なサービスに
[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 更新日:2019/12/27 Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているかもしれません。 ということで今回は、日々のコーディング作業で気になった覚えのあることをどどんとまとめてみました。 このデザインだとどんな風に困ってしまうのか、そしてどう変えれば改善できるのか、なるべく具体例を挙げて説明していきます。 どのデザインツールでも共通の内容が多いと思いますが、基本的にはPhotoshopでの作業を想定しています。 常識的な内容も多いので、そのレベルは当然できてますという方
いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回は、お問い合わせフォームの作り方やデザインのパターンをいくつか記載します。 demo Contents 縦に積むレスポンシブフォーム縦に積むレスポンシブフォーム(余白なし)背景色を交互に変えるレスポンシブフォーム まずは基本のフォームの作り方です。テーブルタグを使っています。 form-tableというクラスを大枠につけました。 HTML <table class="form-table"> <tbody> <tr> <th>氏名</th> <td><input type="text" name="name" s
TOPブログ【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode] 【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode] 更新日:2019/10/04 タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを 依頼されたことがあって(最終的には別のデザインになりましたが)、 もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix-blend-mode を併用することで、アニメーションによるテキストの色の変化がより印象的に。 作業内容 ベースの構成[css/clip-path] 写真に被っているテ
SVGの書き出し方【よくある失敗例】+ IllustratorからPhotoshopにシェイプをコピー 更新日:2017/06/30 SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、jpgやpngと同じようにアセット機能で書き出しができます。 ですが、「中身がパスではなく画像になっている」という問題がよく起きるので、本記事ではよくある失敗例をまとめてみました。 上手くいかないあるある「SVGの中身が画像になっている」というミスは新人さんがよくやりがちです。 これはぱっと見で気づきにくく、スマホ実機検証などで「SVGなのに滲んでいる…?」というところから発覚したりします。 確認方法としておすすめなのが、「ページ全体を拡大表示して確認する」という方法です。 画面を拡大していくと、中身がパスになっていないSVGはどんどん荒くなっていくので一目で分かります。
ホームページ制作 BLOG サイトが重いときに!画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】 サイトが重いときに!画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】 更新日:2019/08/07 Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。私も試したことはありますが、画像がパッと出てきて画面がガタついたり、jQueryをいじらないとカスタムしにくかったりと、思った通りの動きをせず悩んでいました。 そんななか見つけた「lazysizes.js」は、「JavaScriptの読み込み」と「クラスの追加」だけで遅延表示ができ、簡単なcssの追記で
更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめです。 ただ、記述の仕方によって、IEで表示されなかったりスマホで拡大・縮小できなかったりと検証が面倒…。 そういったポイントを押さえ、全モダンブラウザで表示できる方法をご紹介します!
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ横並びを縦並びにするテーブルレスポンシブ疑似要素で見出しを用意するテーブルレスポンシブcontent:attr() で見出しを表現するテーブルレスポンシブspanで見出しを表現するテーブルレスポンシブスクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブPC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので、それらをb
WordPressにより構築されているサイトで、定期的に何かの処理を実行したい、ということがあるかと思います。 例えば、毎日午前2時に定型文の投稿を下書きを作っておく、という処理をさせたいというケースを考えます。 システムに詳しい方だと「自動実行」といえばすぐに「cron」機能が思い浮かぶかもしれません。 Linux系のサーバーで定期的にある処理を自動で実行してくれるようにできる機能です。 しかし、サーバーのcron機能が使えない状況もあるかもしれませんが、 その場合でもWPが提供している「WP-Cron」という機能を使えば自動実行を実現させることができます。 WP-Cronの動きサーバーのcron機能は、サーバーの時間に基づいた定期実行ですが、WPはそもそもWeb上のシステムですので、ブラウザからのアクセスがないと何も動きません。 ですので、WP-Cronの動きとしては02:00に処理が
今どきのホームページでは、ホバーアクションがあるのが当たり前のように感じます。 また、1つ1つのホバーアクションが作り込まれていて、作りを見させてもらうと「なるほど!?」と思うような作りをしていて、参考にさせてもらっています。 そんな今どきのホームページに組み込まれているかっこいいホバーアクションの中から、今回はcssだけで作れる10個のホバーアクションの作り方をご紹介したいと思います。 ベースとなるボタンのスタイル .btn a { background: #eb493c; color: #fff; display: block; font-size: 16px; font-weight: bold; height: 100px; line-height: 100px; overflow: hidden; position: relative; text-align: center; t
最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 また、テキストエディタで開いて修正ができるので、別の色の画像が必要になった場合も、中の色コードを変えるだけで簡単に複製することが可能です。 今回は、SVGのpathを直接変更できる点を利用して、アニメーションのサンプルをいくつか作成してみました。 Contents ①imgタグを読み込み ②svgタグを直接書き込む ③imgタグを読み込み、desvg.jsを使用する パーツ別にアニメーションを付ける クリッピングマスクのアニメーション 波のアニメーション 線を描くアニメーション ①imgタグを読み込み 動
Flexboxと仕事でのWeb制作FlexboxというCSSプロパティについて、すでに実際にバリバリ使ってるよという方も、聞いたことはあるけど使うまでに至っていないという方もいらっしゃるでしょう。 Flexboxがどんなものなのか、ということはこの記事では扱いません(こちらの記事やこちらの記事などがとても参考になりました。) 今回は、とても便利そうなFlexboxですが、Web制作の仕事で実際に使用するかどうかについて考えてみました。 Web制作の仕事では、対応ブラウザ(見え方を保証するインターネットブラウザ)を気にして制作します。 なぜなら、対応ブラウザによって、制作方法・記述方法がかなり変わってくるからです。 FlexboxはIE9では全く対応しておらず、IE10、Android4.2以前の標準ブラウザではFlexboxの記述方法がかなり違う、というのが考慮するポイントです。 Web制
いきなりタイトルを裏切りますが、まずはaiファイルをPhotoshopで開くというのを試しましょう。 “ファイル” → “書き出し” → “書き出し形式” でpsdを選択して書き出しします。 書き出しオプションはWeb用(カラーモード:RGB / 解像度:スクリーン)に設定。 レイヤーを保持した状態で問題なく書き出すことができれば、Photoshopでスライスするのがおそらく一番早いと思います。 それがうまくできなかった時や、デザインの更新頻度が高くスライスデータを使い回したいなどの場合は、イラストレーターでスライス作業をすることになります。 これにはいろいろな方法があるので、メリット・デメリットも考えつつまとめてみました。 最適解というのはなさそうですが、必要に応じて使い分けることで憂鬱なスライス作業を少しでも効率的にこなしたいですね。 Contents ピクセルに整合させるための初期設
次のページ
このページを最初にブックマークしてみませんか?
『東京のホームページ制作 / WEB制作会社 BRISK』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く