サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
www.asobou.co.jp
デザインの生成方法 ミッドジャーニーでデザインを生成する場合は、既定のテキスト /imagine prompt を入力した後に 〇〇 design for というテキストを入力します。 〇〇に生成したいデザインの種類(Webサイト、ロゴ、雑誌など)を入力すると指定したデザインを生成できます。 webサイトデザインの生成 画面赤枠に既定のテキスト /imagine prompt の後ろに web design for (業種や職種) と入力します。 今回は例として、「農家のwebサイトデザイン」を英訳した web design for farmer と入力しました。 約1分程度で、画面赤枠のようにデザインが生成されます。 今回は入力したキーワードが「farmer(農家)」という抽象的なキーワードだったので、全てアメリカの小麦農家のようなデザインが生成されました。 前回の記
Midjourneyの登録方法 まずは、Midjourneyの登録方法を解説します。 下記3ステップで登録できます。 1. Discordにログイン MidjourneyはDiscordを通して利用するサービスです。 既にアカウントを所有している方は、公式サイトにアクセスしてログインをしましょう。 Discordアカウントを所有していない方は、下記の手順でアカウント作成が可能です。 Discord公式サイトにアクセスし、画面赤枠の「Login」をクリックします。 Discord公式サイト 「Login」をクリックすると下記の画面に遷移します。 画面赤枠の「登録」から新規アカウントの作成ができます。 2. 公式サイトにアクセスし「Join the beta」をクリック Discordにログインできたら、Midjourney公式サイトにアクセスして画面赤枠の「Join the beta」をクリ
「ハンマーを持つ人にはすべてが釘に見える」という格言に耳が痛いと思う今日この頃です。 みなさん render hooks パターン使ってますか。 今回は記事タイトルの通り React.FC を返すカスタムフックを作りたい!! という筆者の願望を叶えるべく試行錯誤した内容をお送りします。
テキストを打ち込むだけで画像やイラストを生成してくれる、AI画像生成サービスをご存知でしょうか? 「近い将来イラストレーターの仕事がなくなるかも!?」と2022年SNSで大きな話題になりました。 この記事では、代表的なAI画像生成サービスとCanvaのAI画像生成機能の使い方について解説します。 AI画像生成機能を使ってみたいという方の参考になれば嬉しいです! 代表的なAI画像生成サービス はじめに代表的なAI画像生成サービスをご紹介します。 Stable Diffusion(ステイブルディフュージョン) Stable Diffusion(ステイブルディフュージョン)デモサイト 使用回数:無制限 料金:無料(2022年12月現在) 備考:プログラムの知識が必要なので、導入のハードルがやや高め DALL・E2(ダリ ツー) DALL・E2(ダリ ツー)公式サイト 使用回数:無料版は月15回ま
webサイトを作成しているとドロップダウンメニューの設置をすることがよくあります。 メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。 今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。 ドロップダウンメニューとは ドロップダウンメニューとは、メニューのタイトル部分をクリックもしくはホバーしたときに、下に垂れ下がるようにして表示されるメニューのことです。 今回実装するのは、弊社サイトでも採用しているような、グローバルナビゲーション(以下Gナビ)に付随するような形で用いられるドロップダウンメニューです。 該当するGナビタイトルにマウスホバーすると、その下にドロップダウンメニューが表示され、該当のGナビタイトルもしくはドロップダウンメニューからマウスが離れると非表示になるという仕様で実装していきます。 Gナビ部分の実装
React Testing Library や Chrome の開発者ツールでアクセシビリティツリーが見えるようになるなど、最近はただ見た目通りにマークアップするだけではなく、アクセシビリティに配慮したマークアップも必要なスキルセットになってきている流れを感じます。 筆者といえば、最近HTMLやCSSをよく書くようになり、マークアップ完全に理解したからマークアップなんも分からんとなっている状況です。(アクセシビリティも同様) 今回はマークアップなんも分からんといった状況の筆者が、アクセシビリティに配慮したマークアップを意識するといった内容になります。HTML、CSS、アクセシビリティは難しいので鵜呑みにせずに適宜MDNなどのドキュメントをご確認ください。 例えばチェックボックスを装飾したい 無性にチェックボックスを装飾したいとき、あると思います。 例えばこんな感じのチェックボックスですね。
ミックスインの基本 ミックスインの基本は、@mixinと、@includeの二つで構成されています。 Sassの記述は下記のようになります。 /*ミックスインを定義*/ @mixin box001 { padding: 20px; margin-top: 30px; background-color: #ededed; } /*定義したミックスインを呼び出し*/ .sample-box { @include box001; } @mixinのあとに半角スペースを空けて、任意のミックスイン名を記述します。(上記の例では「box001」というミックスイン名です) その後ろに波括弧でスタイルを記述していきます。 @includeで呼び出す際には、呼び出したい場所で@include、半角スペース、呼び出したいミックスイン名と記述します。
今回は、GoのコードをWebAssenblyにコンパイルしてブラウザで動かす方法を試してみたいと思います。 WebAssemblyとは WebAssembly(wasm)はブラウザが解釈できる専用のバイナリ形式で、低レベルなアセンブリ風言語です。 Web標準として開発されており、現在では様々な言語がコンパイル後のバイナリ形式としてWebAssemblyを指定できるようになっています。 WebAssemblyにコンパイルされたプログラムはブラウザやNode.jsなどの環境で、Javascriptと一緒に実行することができます。 代表的な言語ではC、C++、Rustがあります。 Goもv1.11から標準機能として、コンパイル時にWebAssemblyが指定できるようになりました。 GoのコードをWebAssembly形式にコンパイルする 今回はgo 1.18の環境で作業を行います。
webサイトのリニューアルを行う際、お客様から「元のサイトも手元に残しておきたいのだけれど・・・」という相談をいただくことが、しばしばあります。 旧サイトのデータを残しておくことで、過去のコンテンツ確認や、旧サイトの構造の見直しを容易に行うことが出来ますが、リニューアルの際には、旧サイトをサーバから削除するのが通例ですので、残すためにはサーバからのダウンロードが必要になります。 ただ、単にFTPなどを使ってダウンロードしただけでは、パス(※1)が切れてしまい、サイトを正常に閲覧することが出来なくなってしまうことがあるため、ダウンロードしたページごとにパスの置換をする必要が生じます。 しかしながら、サイトのボリュームや構成によっては、手動でパスの置換を行うのも現実的ではありません。 そこで、今回はパスの置換を自動で行いながらサイトを丸ごとダウンロードできるツールである、Website Exp
goで複数のモジュールを組み合わせて機能を実装する場合にgo.modでモジュールをimportして使うのですが、importしたモジュール側に実際にどんな値が渡されてきているのかを調べたい場合にモジュールにデバッグコードを追加してpushし、利用側で変更したモジュールを更新する必要があります。 1回で済めばいいのですがそういうわけにもいかずかなり手間がかかってしまいます。 また、自分で作ったモジュールであればpush可能ですが、そうでない場合も多いかと思います。 そこでgo.modのreplaceを使ってgithubからimportするのではなくローカルのモジュールをimportする方法をご紹介します。
error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネントです。error boundary は配下のツリー全体のレンダー中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。Error Boundary―React 子コンポーネントでエラーが発生した時にエラー画面をフォールバックUIとして表示してくれる機能です。 今回試していませんが、error boundaryをシンプルで再利用可能なラッパーを提供しているライブラリも存在するようです。
webサイトを作成しているとフローティングボタンを設置することがよくあります。 フローティングボタンとは、ページの先頭へ戻るボタンやお問い合わせボタンなど、画面の右下などに表示され、スクロールしてもその位置で追従してくるボタンのことを言います。 今回はjQueryを使って、フローティングボタンの挙動をアレンジしてみたいと思います。 ファーストビューとフッターの重要性 フローティングボタンは何もしなければ常に右下に表示され続けるわけですが、これを表示させたくないタイミングというものが存在するでしょう。 例えばファーストビューとフッターが挙げられます。 ファーストビューはそのサイトに訪れて一番最初に表示される領域です。スクロールせずに画面に表示された部分で、いかに訪問者を獲得するかは重要な課題となります。 企業のブランディングを図るため大きなメインビジュアルでかっこよくデザインしていたり、最近
Windows用とMac用のプラグインへのリンクがありますので、そちらからダウンロードします。 2021年10月現在では、最新のプラグイン名は「WebPShop_0_4_0_Win_x64.8bi」となっています。 STEP2.Photoshopの⼊っているフォルダにインストール STEP1でダウンロードしたプラグインをPC内の下記ディレクトリに移動します。 移動した際に、「対象のフォルダーへのアクセスは拒否されました このフォルダーへ移動するには管理者の権限が必要です」とダイアログが表示された場合は、管理者の方に確認をした上で、「続行」を選択してください。 この作業をしている時にPhotoshopを開いているようであれば、アプリケーションを再起動をして準備は完了です。 PhotoshopでのWebP形式画像の書き出し方法 STEP1.Photoshopに画像を配置 PhotoshopにW
過去記事「可読性の高い文章をデザインするポイント」でも紹介しましたように、webサイトに限らず文章の読みやすさを左右する要素に「フォントサイズ(文字サイズ)」「行間」があります。 フォントサイズが小さく、行間が詰まった文章は視認性や可読性が低く、ユーザにストレスを与えてしまいます。 では、webコンテンツで読みやすい文章にするためには、具体的にどれくらいのフォントサイズ・行間を設定すればよいのでしょうか? そこで今回は、主に文章を読んでもらうことを目的とした国内のメジャーなニュースサイト・メディアサイトを調査し、スマートフォン・PCのデバイス毎に最適なフォントサイズと行間を導き出したいと思います。 調査方法 筆者が選んだ国内ニュースサイト・メディアサイト20サイトを調査 記事ページ内の本文テキスト・h1(ページタイトル)テキストが対象 CSSで指定されているフォントサイズ(font-siz
今回はGoのmockフレームワークであるgomockの使い方を紹介したいと思います。 gomockとは、Go言語用のmockフレームワークで、組み込みのテストパッケージと合わせて利用するライブラリです。 golang/mock ドキュメント $ go get github.com/golang/mock/gomock go: finding github.com/golang/mock v1.4.4 go: downloading github.com/golang/mock v1.4.4 $ go get github.com/golang/mock/mockgen go: downloading golang.org/x/tools v0.0.0-20190425150028-36563e24a262 go: extracting golang.org/x/tools v0.0.0-2
前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい、そんな時に便利なのがtransitionプロパティです。 今回はtransitionプロパティについて解説していきます。 transitionプロパティとanimationプロパティの違い まずは二つのプロパティの何が違うのかを見ていきましょう。 1.transitionプロパティは@keyframesの設定が必要ない animationプロパティでCSSアニメーションを実装する際は、別途@keyframesで変化していく形状などを記述しておく必要がありました。しかしtransitionでは@ke
文章を書いている時「句読点を付ける位置はここでいいのかな……」と悩んだ経験はありませんか? 句読点の意味はなんとなく知っているものの、正しい使い方を説明できる人は少ないと思います。 適切でない句読点の文章は読みづらいだけでなく、文章の意味が変わってしまうこともあります。この記事では、句読点の役割や覚えておくべき句読点20のルールについて紹介します。 句読点とは 句読点(くとうてん)とは、句点(くてん)と読点(とうてん)の総称で、文章の終わりや区切りに付ける記号です。 句点は「。」のことで、原則として文章の終わりに付けます。 読点は「、」のことで、文章を読みやすくしたり、内容を正しく伝えるために付けます。 句読点を付ける目安としては、1文あたり句点が80文字程度に1回、読点が20~30文字程度に1回つけるのが読みやすい文章とされています。 句点のルール まずは句点のルールについて紹介します。
実際に測ってみると24pxから55pxまでのサイズがありましたが、傾向としては、 メインボタンは、縦幅44px~47px サブボタンは、縦幅34px~38px といった結果になりました。 Apple、Googleのガイドラインを見てみる AppleやGoogleでは、優れたAppをデザインするための指針としてUIガイドラインを作成・公開しています。 それぞれのUIガイドラインでは、タッチターゲット(タップ可能領域)に関する指針があります。 Apple「Human Interface Guidelines」 Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls. 訳:すべてのコントロールで、タップ
弊社ではwebデザイン作成前のプロトタイプを構築する際にAdobeXD(以下XD)を利用する機会が増えてきました。 XDは軽量・シンプルで使い勝手の良いツールなのですが、機能が限定的で痒い所に手が届かないこともしばしば。。。 そのような時に「何か良いプラグインはないかな」とインターネット等で検索していたのですが、「プラグインを自分で作れればおもしろいのでは?」と考え調べてみることにしました。 プラグインとは プラグインとはXDの操作を拡張することができる機能で、ユーザーアクションの自動化や複数のファイルへの操作のように、繰り返し行われるような作業を自動化する際によく利用されます。 Adobe社が提供しているPhotoshop等の製品でも提供されている機能ですが、2018年10月のアップデートによりバージョン13.0以降のXDでもプラグイン機能が提供されるようになりました。
Marshalの基本 json.Marshalは構造体をjsonに変換します。 json.Marshal func Marshal(v interface{}) ([]byte, error) 基本的なサンプル package main import ( "encoding/json" "fmt" ) type Person struct { Name string `json:"name"` Age int `json:"age"` } func main() { p := Person{ Name: "hoge", Age: 30, } s, err := json.Marshal(p) if err != nil { panic(err) } fmt.Println(string(s)) }
Slim は PHP のマイクロフレームワークです。 アプリケーション開発までのセットアップを短時間でできるように、公式で slim-skeleton を提供しています。 今回は PHP のバージョン 7.2 以降で使用可能な Slim4 を使用してハマったことの記録です。
弊社ではwebデザインを作成する際にAdobe XD(以下XD)をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。 XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での作業だとどうしてもミスがおきてしまいます。 デザインスペックを作成して確認することもできるのですが、共有リンクを作成するのにもひと手間かかりますし、IE11のような古いブラウザでは使えないプロパティが含まれている場合は都度修正が必要です。 何か良い方法はないかと調べていたところ、「Copy CSS to Clipboard」というプラグインを見つけたのでご紹介したいと思います。
前回紹介した擬似要素・擬似クラスの指定方法の中から、今回はbeforeとafterについて詳しく解説をしていきます。 基本的な知識から具体的な活用方法まで、丁寧に解説していきますので是非参考にしてください。 属性要素「before」「after」とは 擬似要素とは、対象の要素の一部を指定して装飾を適用する、もしくは対象の要素に擬似的に要素を追加して装飾を適用するセレクタのことを指します。 このうちbeforeとafterは、後者の対象の要素に擬似的に要素を追加して装飾を適用するセレクタです。 そのほか擬似要素に関しての基本的な知識は前回の記事を参照ください。
コロナ禍による在宅ワーク等により、web会議ツールを使ったオンライン会議や商談が一般的になりつつあります。 そのweb会議ツールの代表格でもある「Zoom」。 実は、YouTube liveと連結させてライブ配信ができるのはご存じでしょうか?今回は事前設定からライブ配信の方法、また筆者が使用してみて感じた注意点をご紹介いたします。 ZoomでYouTube live配信をしよう 使用用途とメリット Zoomを使ったYouTube live配信は、Zoomで行う会議やイベントなどの催しを不特定多数の人に見てもらいたい際に有効な機能です。この機能は教育機関やビジネスの場にも応用ができます。 この機能を使うメリットとして、 Zoom会議上限数を上回る人数に対応できる YouTube上にアーカイブを残すことができる オンラインなので、会場に集まらなくて良い が挙げられます。 操作に慣れてしまえば、
スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三本線のアイコンがハンバーガーに見えるためそう名付けられました。この三本線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三本線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ
「カルーセルUI」が使用されていない まず海外の大学サイトを調査して気づいたことは、「カルーセルUI」があまり見られないことです。 カルーセルとは、複数枚の画像を切り替える機能です。スライダーやスライドショーと呼ばれる場合もあります。カルーセルは少ないスペースで複数枚の画像を表示することができるため、多様なwebサイトで使用されています。 しかし、カルーセルを多く使用すると画像の読み込みに時間がかかり、サイト表示速度の低下に繋がります。 さらにスライダーの2枚目以降のコンテンツは、サイト訪問者に見られていないケースが多いです。 上記のことからすべてのコンテンツをユーザーに閲覧してもらえるよう、カルーセルの使用を控えるサイトが多くなってきています。 デバイスによって見せ方を変化 スタンフォード大学(Stanford University)のサイトでは、デバイスによって見やすい表示方法やレイア
前回はGoogleの提供している日本の祝日カレンダーから祝日データを取得してみました。 今回は以下の2種類の方法で、自分のGoogleカレンダーの予定を取得してみようと思います。 カレンダーを公開し、前回同様APIキーを用いて取得する(方法1) サービスアカウントを用いて、認証でカレンダーを取得する(方法2)
VueのメジャーバージョンアップがQ3 2020に予定されており、Roadmap通りであればもうすぐ公開されます。 そこで、Vue3の目玉のひとつである「Composition API」を使って、過去に当ブログでご紹介したコードを書き直してみたいと思います。 今回は前編として、Composition APIについてまとめて行きます。
Facebookでは、高解像度デバイスで最適な表示を実現するには、縦630px×横1200px以上(1:1.91)の画像を推奨していますが、サイズが大きすぎるとデータが重くなってしまうため、縦630px×横1200pxの画像を設定することをおすすめします。 また、FacebookのOGP画像は主として長方形に表示されますが、小さい画像を設定すると正方形で表示されます。 はてなブックマーク:縦840px×横1200px はてなブックマークとは、気になった記事やサイトをオンライン上に保存できるサービスです。はてなブックマークのOGP画像は、Facebook・Twitterよりも縦サイズが大きい縦840px×横1200pxが最適サイズです。 Facebook・Twitterに加え、はてなブックマークにもOGP画像を対応させたいのであれば、下記画像のように縦840px×横1200pxで作成し、縦6
次のページ
このページを最初にブックマークしてみませんか?
『ユーザビリティに配慮したホームページ制作・コンサルティングのアーティス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く