Google Bard は、Google AI の大規模な言語モデル（LLM）であり、テキストとコードの大規模なデータセットでトレーニングされています。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を行うことができます。
5月11日に公式でGoogle Bardが日本語に対応した旨がアナウンスされたので、早速使ってみましょう。

Chat-GPTとの違い

本人に聞いてみました。

ChatGPTと私は、どちらも大量のテキストとコードのデータセットでトレーニングされた、会話型 AI またはチャットボットとも呼ばれる大規模な言語モデルです。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を行うことができます。

ただし、いくつかの重要な違いがあります。 ChatGPT は OpenAI によって開発され、私は Google AI によって開発されています。 ChatGPT は、テキストとコードの大規模なデータセットでトレーニングされていますが、私はテキスト、コード、およびウィキペディアとウェブ上のその他のオープンソース情報のデータセットでトレーニングされています。これにより、私はより包括的かつ有益な回答を提供できます。

さらに、ChatGPT は英語のみをサポートしていますが、私は英語、フランス語、ドイツ語、スペイン語、ポルトガル語を含む多くの言語をサポートしています。これにより、より多くのユーザーにアクセスできます。

全体として、私は ChatGPT よりも強力で用途の広い言語モデルです。包括的かつ有益な回答を提供でき、より多くの言語をサポートしています。

stocker.jp

作成するコンテンツ

お店の名前
サイトのタグライン
メインコピー
リード文（100文字程度）
商品一覧部分で使用する商品の概要の説明文(200文字程度)

2023-05-12

Illustratorチュートリアルまとめ

6回目の試験の提出(ポートフォリオ制作)

その他

提出フォーム

forms.gle

2023-05-12

自身のスキルを説明する

ポートフォリオ

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。

html

htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの設定を行い、適切なアウトラインを設定出来るようになりまｓた。これらはWHATWG（Web Hypertext Application Technology Working Group）の仕様に準拠した形で記述しています。

また以下の項目も学びました。

picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
フォーム関連の新しい属性やautocomplete属性などを使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとってもEFOを考慮した、解り易いフォームを作成する事が出来ます。
HTML APIを使う事で様々は表現が出来るようになりました。授業ではCanvas API を使いパーティクルを取り入れて、ページに華やかな印象を持たせる事が出来ました。

css

cssの授業ではcss3を中心に学びました。メディアクエリを使う事でPCだけでなくモバイルに対応したサイトを作る事が出来るようになりました。またcssの新しい表現を使う事で今までビットマップ画像でしか出来なかった表現をcssだけで表現する事が可能になりました。またアクセシビリティやユーザビリティを考慮した、ページ設計やデザインが出来るようになりました。

flexboxやgridレイアウト

今まではfloatやpositionを使ったレイアウトが一般的でしたが、マルチデバイスに対応させる為に煩雑な対応が必要でした。この新しいレイアウト方法を使用する事で、マルチデバイスに対応でき、かつ自由なレイアウトが容易に出来るようになりました。

様々な単位

vh、vwや％、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。

ビットマップ画像の表示

フルードイメージやobject-fitを使用する事で、画像のアスペクト比に囚われない自由な画像表示が可能になります。

ブラウザ対応

上記で挙げた技術はブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。場合によってはベンダープレフィックスを使用して対応させます。

チーム作業を見据えた命名規則

他人が見てもざっくり命名意図がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。

カスタムプロパティを使用したデザイン設計

メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する事で一貫性のあるデザインが可能になります。

- - - - -

SVG

SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
SVGコードを編集し、モーションパスやドローイングアニメーションを作成しました。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。

Javascript/jQuery

DOMの操作
if文、for文
ランダムを使ったおみくじ
Ajaxでのファイル操作
clcikイベントやscrollイベントの設定
css3のアニメーション機能と連動（ハイブリッドアニメーション）
様々なライブラリーを利用
Ajaxを使った無限スクロール

特にAjaxでは読み込むデータを外部ファイル化し、非同期通信する事で必要な物を必要な分だけ必要な時に読み込む、という現在webアプリなどで主流になっているSPA（シングル・ページ・アプリケーション）の元となる考え方を学びました。またFetch APIを使った非同期通信も行いました。

PHP/Wordpress

xampp/mampを使った仮想サーバーの構築
get/postを使ったデータ通信
データベースとの接続およびデータの挿入や検索
includeを使ったテンプレート化
sessionを使ったデータ保存
バーチャルホストを設定して、ルートパスを有効にする
wpのオリジナルテーマの作成
wpを本番環境にデプロイする

photoshop

アートボードを使用して、カンプやバナーを複数サイズ展開させる
アセット機能を使った画像書き出し
調整フィルターを使用した画像補正
フィルター機能を使用した画像加工

SASS

SCSS記法でのSASS
@useを使ってパーシャルファイルを読み込む
演算をする
if文を使う
変数を使う
@mixinを使ったメディアクエリの設定
コンパイラーを使ってcssにコンパイルする

Git

gitの基本設定
githubとの連動（ローカルにクローンを作成）
ブランチモデルに沿ったバージョン管理
githubでissue管理
github pagesを使ったホスティング

ferret-plus.com

note.

2023-05-09

Webサイトを見る、知る、そして作る

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。

Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。

既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

アニメーションを使ったWEBサイト

http://www.teamgeek.co.za/www.teamgeek.co.za

動画を使ったWEBサイト

www.tenku-f.jp

co.hellolife.jp

couleecreative.com

良いと思ったサイトをまとめる

bntncayo05.starfree.jp

shibaco.wp.xdomain.jp

既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。

stylebread.com

www.lumine.co.jp