<p>こんにちは！さとです。うぇぶスタを運営している6人チームの中でエンジニアを担当しています！</p><p style="text-align:right"><br></p><h2 id="h9b7fc86181">プロフィール</h2><blockquote>名前：さとうまなみ<br>出身：大阪府<br>趣味：写真撮影/ゲーム<br>何してるの？：下っ端フロントエンドエンジニア<br>得意なこと：写真が得意です！！！！！！<br>自慢できること：寿司打高級で6000円返ってきました</blockquote><h2 id="h4875dd3546">普段何してる？</h2><p>フロントエンドエンジニアになるため、わからないなりに日々コードを書いています。（今はNext.jsとNuxt.js！）<br>エンジニアリングもデザインも大好きなので、将来はデザインエンジニアになりたいと思っています！<br><br>写真とゲームが大好きで、片道2時間半の範囲内ならどこでも飛び回りつつテトリスとナワバトラーに励んでいます<br>いつか上京したいな〜と思いつつ、まだしばらく大阪で働く予定です、、</p><h2 id="h898085d62a">なぜWebの専門学校に入ったの？</h2><p>小学生の頃に簡単なHTMLとCSSに触れており、高校の頃「子供の頃好きだったことがあるのなら」と担任にWeb業界を薦められたことがきっかけでした。<br>当初は「デザインなんてできるわけがない！」と思っていましたが、学んでいくうちにその奥深さを知り、今では大好きになりました！<br>苦手意識があっても取り組まなければいけない環境があるのは、とても大切だな〜と思いました。</p><h2 id="h3bcda3e6b0">最後に</h2><p>ここまで読んでくださり、ありがとうございます！今後も私たちと一緒に勉強していきましょう🎶</p>

[メンバー紹介]うぇぶスタのネコの紹介！

<p>こんにちは！普段うぇぶスタでは、webデザインやプログラミングを勉強中の学生さんに向けた勉強お悩み解決するための情報発信をしています！<br>運営メンバーは6人いて、その中でも私はプログラミングについて発信しているのですが、今回はうぇぶスタのシバイヌの中の人「おかざきるい」についていろいろ紹介していきます！</p><p style="text-align:right"><br></p><h2 id="h9b7fc86181">プロフィール</h2><blockquote>名前：岡崎流依(おかざき るい)<br>出身：神戸市<br>趣味：カメラ、邦ロック、ゲーム、プログラミング<br>何してるの？：エンジニアしてます。<br>得意なこと： デザインの意図を汲み取ること<br>自慢できること：全国大会で銀賞を2回、yahooさんのハッカソンでも優秀賞を2回受賞しています。</blockquote><p><br></p><h2 id="haa024e407c">普段何してるの？</h2><p>実務でデザインエンジニアとして働きながら、趣味でアプリ開発をしています！<br></p><h2 id="h0520b8cd19">なぜWebデザインの専門学生からフロントエンドエンジニアへ？</h2><p>専門学校にてHTML, CSS, JavaScriptの授業があり、苦手を克服するために勉強を始めたのがきっかけで好きなものを自分で作れる楽しさにひかれプログラミングにはまってしまいました。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>この記事を読んで少しでも私やうぇぶスタに興味を持ってくれたら嬉しいです。ではまた！</p>

[メンバー紹介]うぇぶスタのシバイヌの紹介！

<p>こんにちは！岡崎です！<br>今回は実務などで使用するwebアプリ開発者が知るべき最低限のHTMLタグを紹介していきたいと思います！</p><h2 id="h4f1c94b5cd">注意書き</h2><ul><li>記事の内容は記載当時であることに注意してください．</li><li>フロントエンドエンジニアである場合は<code>detailsタグ</code><span style="color:#1b1b1b">や</span><code>dialogタグ</code><span style="color:#1b1b1b">, </span><code>articleタグ</code><span style="color:#1b1b1b">などのタグを理解し，セマンティックWEBを心掛けるべきですので，記事で触れるタグはもちろんですがそれ以外のタグについて知っておく必要があると筆者は考えています．</span></li><li>本記事では，<a href="https://www.w3.org/TR/wai-aria-1.2/" target="_blank" rel="noopener noreferrer">WAI-AREA</a>などについては触れないものとする</li></ul><h2 id="h8ee2171751">重要度（★★★）</h2><h3 id="hbcce64804e">h1 ~ h6タグ</h3><p>見出しに使用します．<br>原則コンテンツ構造的に不自然にならないように使用しましょう．</p><pre><code>h1
├ h2
└ h2
&nbsp; ├ h3
&nbsp; ├ h3
&nbsp; └ h3</code></pre><h4 id="h698f6d872c">h1</h4><p>ロゴやサービス名などに使われることとが多い．<br>ページのタイトルということでブログなどの大見出しにも使用されることがある．<br>※正解はないのでコーディングする人のこだわりや思想によって使用場所が異なります．</p><h4 id="h7eef1ce917">自分の思想</h4><blockquote>h1は原則ヘッダーなどに存在するロゴに使用しています．<br>ブログの記事ページなど，内容がタイトルとして表すことができる場合はブログのタイトルにも使用していたりします．<br>HTMLの使用では複数配置することは可能ですが，原則1ページに1つがベストプラクティスとされています．<br>スクリーンリーダーを使用するユーザーにとって大見出しが複数ある場合混乱を招いてしまう場合があるので事情がない場合は1つにしたほうが良いでしょう．</blockquote><h3 id="heea0674248">pタグ</h3><p>文字を挿入する際に使用します．<br>段落を意味することが多いです．</p><h3 id="hf1a0551da1">aタグ</h3><p>押下するとページ遷移するリンクを生成することができます．<br><code>href属性</code>にURL，<code>target属性</code>を指定することによってタブに暗黙的な名称を付けたり新規タブで開くことができる．</p><pre><code>&lt;a href="https://" target="_blank"&gt;リンク&lt;/a&gt;</code></pre><h4 id="h3304772cd9">aタグを使用するメリット</h4><p>aタグを使用することでスクリーンリーダーを使用しているユーザーに遷移するリンクというのが伝えることができる．<br><code>Tabキー</code>でフォーカスができ，<code>Enterキー</code>で遷移することができるためアクセシビリティを考慮した実装を自前でする必要がなくなる．</p><h3 id="h43708af002">buttonタグ</h3><p>押下すると動作するボタンを生成することができます．<br>ユーザーが押せるボタンは原則<code>buttonタグ</code>で作成してください．（単純にアクセシビリティやユーザービリティが良くなり，ユーザー体験が向上します．）<br>※押せないボタンを実装する場合は<code>disable属性</code>を付与するだけで実装するべきものが減る<br>特定の条件下で<code>type</code>を指定しなかった場合は<code>submit</code>が付与されたりするのでそれを避けるために<code>type属性</code>をつけるのを癖づけましょう．<br><a href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md" target="_blank" rel="noopener noreferrer">reactのルールではtype属性を指定しないとエラーが出たりします．</a></p><pre><code>&lt;button type="button"&gt;ボタン&lt;/button&gt;</code></pre><h4 id="h6d3d968be0">aタグを使用せずに全てbuttonタグで実装しても良いのでは？</h4><p>画面遷移を<code>buttonタグ</code>でしてしまうとスクリーンリーダーを使用しているユーザーは想像しづらくなってしまうため使用方法によってタグを考える必要があります．</p><h3 id="h347cfa40ab">imgタグ</h3><p>画像を埋め込むことができるタグです．<br><code>src属性</code>に画像のパス，<code>alt属性</code>には画像が見えない人でもわかる文字を挿入してください．<br>また，ただのアイコンの場合でも<code>alt属性</code>は空文字だけでも指定するようにしてください．</p><pre><code>&lt;img src="画像のパス" alt="画像を説明する文章" /&gt;</code></pre><h4 id="h52bdbbfc31">alt属性の使用上の注意</h4><p>alt属性に文字を指定することで，画像が表示できなかった場合やスクリーンリーダーを使用した場合に画像の代わりに表示することができます．<br>空文字を指定することで画像に意味がないことを明示的に示すことができる．<br>また，スクリーンリーダーを使用した場合に読み上げを飛ばすことができる．</p><h3 id="h374983f2a5">divタグ</h3><p>レイアウトを取るために使用します．</p><h3 id="hb3864da3e2">spanタグ</h3><p>文字列の中で特定の位置にスタイルを当てたい場合に使用します．</p><pre><code>&lt;p&gt;〇〇を導入後、CVRが&lt;span&gt;30%向上&lt;/span&gt;しました！&lt;/p&gt;</code></pre><h2 id="h18f29d2271">重要度（★★）</h2><h3 id="h7ba8a4160a">formタグ</h3><p>小要素に<code>input</code>や<code>textarea</code>などの要素がある場合，submitすることでURL先に情報を送信する．<br><code>Enterキー</code>で送信されたり，<code>button[type=submit]</code>を使用することで<code>action</code>先にページリクエスト（リダイレクト）が行われる．<br>近年のwebアプリではrestful apiを用意しjsonを取得，フロントエンドに反映するパターンが多いため，その場合はeventを取得しpreventDefault()でデフォルトの挙動を無効化することが多いです．<br>※<code>php</code>や<code>rails</code><span style="color:#4d5156">などのviewファイルを</span><code>HTML</code><span style="color:#4d5156">直書きしている場合を除きます</span></p><pre><code>document.querySelector('form').addEventListener('submit', (event) =&gt; {
	event.preventDefault();
})</code></pre><h3 id="hc47193e1ed">inputタグ</h3><p>ユーザーが入力できる要素を生成します．<br>type属性をにinputの種類を指定することで数字だけのキーボードが出るようにしたりできます．<br>required属性を付与することで，入力がされていない場合のバリデーションをブラウザ単位でサポートすることができます．<br>placeholder属性に文字を入れることで入力前に薄く表示される文字を設定することができます．積極的に使用しましょう．</p><pre><code>&lt;input type="range" id="volume" name="volume" min="0" max="11" required /&gt;</code></pre><h3 id="h3a2f2dfffc">textareaタグ</h3><p>ユーザーが複数入力できる要素を生成します．<br>基本的にはinputタグと変わりありません．</p><h2 id="h03561720b8">重要度（★）</h2><h3 id="h75ffbda894">labelタグ</h3><p><code>inputタグ</code>や<code>textareaタグ</code>，<code>selectタグ</code>などの操作対象のタイトル?ラベル?に使用します．<br>pタグではなくlabelタグを使用することで文字をタップした場合のfocusの挙動が操作対象の要素に移るため，単純に使いやすくなり使用を推奨しています．</p><pre><code>&lt;label htmlfor="inputName"&gt;名前：&lt;/label&gt;
&lt;input id="inputName" /&gt;</code></pre><h3 id="hf18691eb29">brタグ</h3><p>改行することができます．</p><pre><code>初めまして，&lt;br /&gt;〇〇です．</code></pre><h2 id="hfa6daccb2d">セマンティックwebを意識する場合に知っておいたほうが良いタグ</h2><h3 id="h3be89268d1">セマンティックwebとは</h3><blockquote><span style="color:#000000">Webページに記述された内容について、それが何を意味するかを表す「情報についての情報」（</span><a style="color:#3344ff;background-color:#fcfcfa" href="https://e-words.jp/w/%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF.html" target="_blank" rel="noopener noreferrer"><strong>メタデータ</strong></a><span style="color:#000000">）を一定の規則に従って付加し、コンピュータシステムによる自律的な情報の収集や加工を可能にする構想。</span><br>セマンティックWebとは - 意味をわかりやすく - IT用語辞典 e-Words ( https://e-words.jp/w/セマンティックWeb.html )</blockquote><p>e-Wordsさんから引用しました．<br>要は単にHTMLを書くだけではなく，意味付けを意識したコーディングを意識することで<a href="https://gmotech.jp/semlabo/seo/blog/crawler_measures/" target="_blank" rel="noopener noreferrer">クローラー</a>にも認識されやすいことからSEO的にも良く，スクリーンリーダーの読み上げが変わる場合があるのでアクセシビリティ的にもより良い実装をすることができます．</p><h3 id="hdf68ac8090">headerタグ, mainタグ, footerタグ</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/95428dec5b6547248a64003da3cd1240/image.png" alt=""></p><h3 id="h9cc1cae3d7">navタグ</h3><p>ナビゲーションに使います．<br>例：ヘッダーのナビゲーションリンクやパンクズリストに使用します．</p><pre><code>&lt;nav class="crumbs"&gt;
&nbsp; &nbsp; &lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;Bikes&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;BMX&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;Jump Bike 3000&lt;/li&gt;
&nbsp; &nbsp; &lt;/ol&gt;
&lt;/nav&gt;</code></pre><h3 id="h614ce0e5a1">sectionタグ</h3><p>文章の見出しと本文を囲うタグとして使用します．</p><h3 id="hb6dddde4c7"><span style="color:#1b1b1b">detailsタグ</span></h3><p><code>detailsタグ</code>は<code>summaryタグ</code>と合わせて使用します．<br>アコーディオンメニューを作成する際にjavascriptを使用し作成することが多いですが，javascriptで作成してしまうとスクリーンリーダーの挙動が実装頼りになってしまいますがdetailsタグを使用することで正しく読み上げが行われます．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/07b822e89e36432396562383b4e22981/image.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>以上よく使う / 知っておいたほうが良いタグを紹介しました！<br>他にも<code>articleタグ</code>や<code>figureタグ</code>，<code>tableタグ</code>などさまざまなタグがありますが必要に応じて調べて使用するくらいの認識で大丈夫だと思います！<br>また，フロントエンドエンジニアとして仕事をしていく場合は一度<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLのタグ一覧</a>を確認してみてもいいかもしれません！<br>読んでいただきありがとうございました！</p>

WEB開発者が知るべき最低限のHTMLタグ一覧

<h2 id="hd6b71a9c8d">そもそもペルソナの背景とは？？</h2><blockquote>ペルソナ法とは…調査などをもとにしてユーザーのデータを統合して架空の人物を記述しデザインに利用する</blockquote><p>という手法で、もともとクーパー社（ユーザーエクスペリエンスデザインと戦略のコンサルティング会社）を率いるAlan cooperによって生み出されました。<br>この概念の背景には、多くのユーザーに合わせて最大公約数的に機能を拡大していくと、結局誰にとっても使いにくいものになってしまうよね！という考え方があります。ここから、特定のユーザーを具体的に考慮することで、最終的にいろいろな人にとって使いやすいものを作れるという考えが導き出されました。<br></p><h2 id="h300f82494e">なぜペルソナをやるのか</h2><h3 id="ha9c11462b9">ユーザー視点の精度を高めることができる</h3><p>定量データや多くの情報をもとに詳細な情報まで設定したペルソナは、1つの人格のようなものです。ペルソナのニーズを満たすような製品を考えることは、そのほかの多くのユーザーのニーズを満たすことにつながり、結果的にユーザー視点の精度を高めることができます。ユーザー視点の精度を高め、ユーザーが求めるものを製品に集約すれば、製品の完成度を高めることにもつながります。</p><h3 id="ha071f2b158">ターゲットとなるユーザーに対する理解をより深められる</h3><p>結局プロダクトを使ってくれるのは「人」というお話が前回のワークの最初でありました。使ってくれる人すなわちユーザーが何を考え、どのような場面でどんな行動をするかを把握しておく必要があります。一般に商品企画を行う際には、年齢層や性別、居住地といった定量的な属性の組み合わせとして「ターゲット層」が定義されます。<br>たとえば女性向けの化粧品なら、「30代、女性、主婦、既婚者」といった具合ですね。しかし、こうした属性情報の組み合わせだけでは、生き生きとしたユーザーの姿を思い浮かべることはできません。そこで、ターゲットの属性情報に加えて趣味や性格、ライフスタイル、好きな雑誌…といった定性的な情報を肉付けし、よりあたかも実存する人物のようなペルソナを定義するのです。<br>ペルソナを定義しておくことで、カスタマージャーニーの検討やコンテンツ設計といった様々な場面で、「ペルソナのタナカさんならどうするだろう？」…というように、よりユーザーの視点に立って考えることができるようになります。</p><h3 id="h537169dc20">関係者の認識共有を促進できる</h3><p>属性情報の組み合わせであるターゲット設定だけでは、見る人によって解釈に差異が出てしまう懸念があります。具体的なペルソナを関係者全員で共有することで、認識のブレ幅を最小限に抑えることが可能となります。<br>担当者間で認識がズレたままでは、無駄な作業が発生したり、スケジュールが遅れるといったトラブルになりかねません。ペルソナという1人の代表的な人格を設定することで、異なる分野の担当者とも共通の人物像をイメージすることができ、効率よくプロジェクトを進行することができます。<br></p><h2 id="h19e008275e">ペルソナの作成方法</h2><p>ペルソナの作成方法は多岐に渡りますが、どんな方式であれ作成目的を達成できるかどうかを考えて書くことが大切になります。数あるペルソナ記述法の中で、今回の記事は<code>Putting Personas to Work in UX Design: What They Are and Why They’re Important</code>というAdobe社が出している記事を参照しています<br>こちらの記事→(<a href="https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/" target="_blank" rel="noopener noreferrer">https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/</a>）<br></p><h3 id="h1b83dce853">ユーザーに関する情報を収集する</h3><p>すでに決めてあるターゲットを対象に、インタビューやアンケートを行います。年齢などの基本情報から、プロダクトに関わる質問を聞きましょう。例えば、オンライン通販サイトに関するインタビューであれば、使用デバイス、買い物の内容、予算などなど聞いていきます。ここで完全な想像で作ってしまうと今後のプロセスが全て根拠のない情報の土台の上に出来上がってしまうので重要なパートです！</p><h3 id="h1c3d3e157a">調査データから行動パターンを特定する</h3><p>次は調査から分析パート！調査結果から多くのインタビュイーに共通しているような行動パターンを見つけます。例えば、上記に続いてオンライン通販サイトに関するインタビューの場合、複数の人が「商品を買う前に他のサイトも見にいっている」という行動を述べたとします。この人たちは他の質問に対しての回答は異なっているかもしれませんが、ここでより重要なのは違いよりも共通点なので「商品を買う前に他のサイトも見にいっている」ことは行動パターンとみなすことができます。</p><h3 id="hd999286b34">ペルソナを作成し優先順位を付ける</h3><p>ユーザーを理解するのに十分な理解と共感を表現するような方法でペルソナを作り上げましょう。このステップでは多くの個人情報をデタラメに追加することを避けます。詳細が多すぎると気が散り、分析ツールとしてのペルソナの信頼性が低下するからです。<br></p><h2 id="h8eb9c82481">ペルソナはいらない？（おまけ）</h2><p>今回の記事ではペルソナを開設してきましたが、ペルソナに関しては様々な意見があり、ペルソナばかりに頼ることに警鐘を鳴らす人もいます。理由としては、「結局は存在しない架空の人物でありその人を用いてプロダクト開発に活かすのは難しいから」以下引用です。（引用元：<a href="https://note.designing.jp/n/n12ebf3e00d33" target="_blank" rel="noopener noreferrer">https://note.designing.jp/n/n12ebf3e00d33</a>）</p><blockquote>私たちはペルソナに家族や職業、持ち家、車、ペットの有無などの特徴を与える。名前を、仮にテッドとしよう。プロダクト開発ではこのようなディスカッションが行われる。「テッドはこのプロダクトの機能を使うだろうか、気に入ってくれるかな？」「テッドのプロフィールから推測するに、これはテッド向きじゃないかもしれませんね」…テッドってそもそも誰だ？結局のところ、誰もテッドが何を気に入るか知らない。そもそもテッドは存在していないのだから。そんなことは当然だと思うだろう。しかし、理解しつつも、テッドが存在しないことを忘れてしまうケースは多い。<strong>細かい設定を加え、テッドを人間らしくするにつれ、私たちはテッドが実在しないという前提を忘れてしまう。無意識にテッドをステレオタイプに当てはめていることにも気づかない。</strong></blockquote><p>どれだけユーザー調査に基づいて作ったとしても、自分たちの都合のいいように設定をしてしまう危険性があるということです。そんな事態を避けるためペルソナ・スペクトラムという方法を提唱しいている方もいらっしゃいます。詳しくは上記の文章を引用元であるこちらの記事をご覧ください。<br><br></p>

なぜペルソナを作成するの？

<p>大家好！！<br>私はうぇぶスタのダルメシアン「リョウ」です。<br>うぇぶスタではプログラミングについて発信しています。<br></p><h2 id="h9b7fc86181">プロフィール</h2><p>名前：梁逸東（リョウイットン）<br>出身：香港<br>趣味：旅行・アニメ<br>何してるの？：WEBデザイン・プログラミングを勉強しています！<br>得意なこと：目標に向かって突き進むこと。でも目標が無ければ適当にやる。<br>自慢できること：1人で日本で４年間生きていること<br></p><h2 id="hb5c7f12176">今何をしている？</h2><h3 id="h118073bf8b"><strong>・旅行！！！</strong></h3><p>来年は東京に就職します。社畜になる前に一所懸命遊んでいます。<br>沖縄、上高地、北海道など、学生のうちに行っておきたいです。社会人になったら仕事の大変さ・お金など、色々な悩みが溢れると思います。自由に旅行し、自分が生きたいように生きることはもうできない。だから今、毎日の生活を充実したいです。<br></p><h3 id="h64cec52943">・勉強したいことを勉強する！！！</h3><p style="padding-left:3em"><strong>運転免許</strong></p><p style="padding-left:3em">最近運転したいから、合宿で運転免許を取りに行きました。毎日お弁当しか食べなかったり、運転が下手すぎて教官にめっちゃ叱られたりして、大変でした。でも合宿で色々な人と出会って、ルームメートと一緒に勉強し、仮免一発で合格するのは楽しかったです。</p><p><br></p><p style="padding-left:3em"><strong>WEBプログラミング・デザイン</strong></p><p style="padding-left:3em">udemyで色々なコースを買いました。</p><p style="padding-left:3em">Figma UIUX Design, React, Typescript, PHP……</p><p style="padding-left:3em">udemyのコースが全部英語なので、英語の重要さがわかるようになりました。今私の英語のレベルでは全然ダメダメなことが気付きました。</p><p><br></p><h2 id="h45948e8a53">今後・目標</h2><p>今WEBプログラミングもできる、デザインもできるエンジニアになりたい。けど、将来何をしたい？私は全然わからないです。<br>今変化が激しい世代で生きていくには別に目標を持たなくていいのではないかと思います。良い波が来た時に飛び乗れるように、日々勉強し続けることが大事。<br>勉強は一生のことだからね！！<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>将来のことは誰にも分からない。<br>やりたいことをやり、大事な人を大事にし，今の瞬間だけに生きよう！！<br>毎日自分探しというより、人生を楽しもうぜ！！</p>

[メンバー紹介]うぇぶスタのダルメシアンの紹介！

<p>ピンボケしていた。<br>何故か襟元にピントが合っている。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/9a6629ce4a8241c0ae7c77bd8dbb80bc/1664152039140-5cXu5OXZXI.webp" alt=""><br>でも被写体さんの表情や角度が素敵だし、玉ボケもバランスいいし、ボツ<br>にするのはあまりにも勿体ない。<br>なんならこれは夜ポトレなので、オールドレンズ風の柔らかいレタッチも上手くいかなさそう。<br>被写体さんを活かし、暗さを活かし、納得いくレタッチを探しているとたどり着きました。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/b088936e9a9e4c938463d253bcc8af3c/1664152521259-SrzZkhiO0Y.webp" alt=""><br><strong>必殺・モノクロ</strong><br>やり方は簡単。調整レイヤーで<strong>白黒</strong>を選択します。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6bbc37a95e404f4aa4a8cdd632cc8a17/monochrome_1.png" alt=""><br>その時点で白黒に変わるので、あとはプリセットより、好きな濃度を選ぶだけ。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bdfeeb569de54d98aa02e5aa20c822ef/monochrome_2.png" alt=""><br>都会的でかっこいいポートレートに仕上がりました！</p>

【Photoshop】ピンボケしちゃった！でもいい感じにしたい時のレタッチ

<p>こんにちは！今回はアニメーションでめちゃくちゃ重宝するバウンズアニメーションを簡単に付ける方法を紹介します。</p><h2 id="h5c3efc7b40">バウンズアニメーションって？</h2><p>バウンズアニメーションは緩急のある動きや跳ね返りなどで使えるアニメーションです。これが無いとかなり不自然なアニメーションになってしまいます。<br><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/dad3814f09714a9e8d3eeea85fe8dc35/%E3%83%8F%E3%82%99%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%97.gif" alt=""><br>バウンズアニメーション無し<br><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/2be2e89cea7b45f38f6f68e39e2d9fc6/%E3%83%8F%E3%82%99%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%82%E3%82%8A.gif" alt=""><br>バウンズアニメーションあり<br><br>見てもらったらわかる通り、これだけの差が出ます。</p><h2 id="hb3884229f4"><br>適応方法</h2><p>適応方法は簡単でエクスプレッションの機能(位置のプロパティの上でOptionを押しながらクリック)を使い、下のテキストを貼り付けるだけです。</p><blockquote>amp = .1;<br>freq = 2.0;<br>decay = 8.0;<br>n = 0;<br>time_max = 4;<br>if (numKeys &gt; 0){<br>n = nearestKey(time).index;<br>if (key(n).time &gt; time){<br>n--;<br>}}<br>if (n == 0){ t = 0;<br>}else{<br>t = time - key(n).time;<br>}<br>if (n &gt; 0 &amp;&amp; t &lt; time_max){<br>v = velocityAtTime(key(n).time - thisComp.frameDuration/10);<br>value + vampMath.sin(freqt2Math.PI)/Math.exp(decayt);<br>}else{value}</blockquote><p><br>他にもMotion Toolsというプラグインをダウンロード(40$)すればボタン一つで適応することもできるのでもっとアニメーションを追求したいという人は是非！！<br><a style="color:inherit" href="https://motiondesign.school/products/motion-tools/" target="_blank" rel="noopener noreferrer"><strong>Motion Tools - Motion Design School</strong></a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">Our exclusive After Effects Script contains only the most nec</a><br><a href="https://motiondesign.school/products/motion-tools/" target="_blank" rel="noopener noreferrer">motiondesign.school</a><br></p>

[After Effects]たった5秒でバウンズアニメーションを付ける方法！

<p>こんにちは！今回はうぇぶスタのトリの中の人「きのしたゆうり」についていろいろ紹介していきます！<br></p><h2 id="h9b7fc86181">プロフィール</h2><blockquote>名前：きのしたゆうり<br>出身：おおさか<br>趣味：ゲーム、コスメあつめ、映画鑑賞、水族館めぐり<br>何してるの？：専門学校でwebデザインのおべんきょうをしてます<br>得意なこと：おえかき！<br>自慢できること：世界一可愛いアイドル天使女神わんこを飼っています</blockquote><h2 id="haa024e407c"><br>普段何してるの？</h2><h3 id="hc649041cc5">ゲーム、コスメあつめ、映画鑑賞、水族館めぐり</h3><p>・ゲームはAPEXかコ○パス！むかしはドラクエが好きでした。10時間ほどぶっ通しでできるぐらいゲームが好きです。<br>・映画は洋画派。marvel作品とかラブコメ洋画が好き！最近はシンプソンズのアニメ一気見してます。<br>・シュウウエムラとラロッシュポゼを愛してます、コスメ情報は毎日見てます！コスメオタクと繋がりたい。<br>・おおさか出るまでに近畿の水族館制覇します！いぇいいぇい</p><h3 id="h8234b4b8c5"><br>デザインの勉強</h3><p>机に向かってさあやるぞ！みたいな感じで、本気でデザインの勉強に取り組むことはないですが、常にデザインのことを意識しています。家にいるときはスマホでデザインのこと調べたり作ったり、出かけるときはポスター・チラシや看板を眺めたり…。<br>ゲームしながら作業してしまうので、一向に作業が進まないのが欠点です。<br><br>2年生の秋頃から半年ほどインターンに行き、そこで勉強したことが大きな成長だったと感じています。<br>現在はデザインのアルバイトを探して実際に取り組み、より実力をつける練習をしています。<br><br>デザインのアルバイトってなかなか見つからないのですが、無理を言ってでも誰かに頼んでみてください。どこかしらに縁があります！(実践のアルバイトはインターンを経験してからか、3年生になってから取り組むのがおすすめです！)<br></p><h2 id="h99eea56ca2">これからやりたいこと</h2><p>Webデザインだけでなく、グラフィックデザインやアート寄りのデザインなど、媒体を問わないデザインができるようになりたいです。ものすごく苦手意識があるけど、コーディングもできるようになってみたいなあ・・・。オールジャンルのデザインを手掛けてみたいです🎶<br><br>最後まで読んでくださりありがとうございました！</p>

[メンバー紹介]うぇぶスタのトリの紹介！

<p>こんにちは！今回はAfter Effectsで最も時短につながると言っても過言では無い、アニメーションプリセット保存方法を紹介します。</p><h2 id="h1a1b539dde">アニメーションプリセットって？</h2><p>前もって作ったアニメーションを保存しておいて後で呼び出せる機能。エフェクトやレイヤースタイルも保存することができます。</p><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/dbca98c9706f44b2a602a5ea7c29d63b/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%82%9A%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88.gif" alt=""></p><p>こういうアニメーションを作ったとして何回も使いたいという時があると思います。そういう時にプリセットに保存しておけばすぐに呼び出すことができます！</p><h2 id="h087b4efba0">やり方</h2><blockquote><strong>保存方法</strong><br>保存したいアニメーションなどを選択し、アニメーションのアニメーションプリセット保存方法から保存する。<br><strong>呼び出す方法</strong><br>エフェクト＆プリセット(Ctrl + 5)から保存したアニメーションをダブルクリックする。</blockquote><h2 id="he4fe5ca3e1">保存先について</h2><p>保存先は書類 ＜ Adobe ＜ After Effects ＜ User Presets となっています<br></p>

[After Effects]最も時短につながる！アニメーションプリセットの保存方法

<p>こんにちは！今回はエクスプレッションの中の<strong>time</strong>と<strong>wiggle</strong>という機能を使ってアニメーションを操作する方法を紹介しようと思います！</p><h3 id="he46238ff2b">エクスプレッションって？</h3><p>文字でアニメーションを操作する機能で、CSSをイメージしてもらえればわかりやすいです！いろいろな種類があるのですが、その中でも今回はtimeとwiggleを紹介します！</p><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/06694aa76e1a4bafad57fbc14ed704c5/%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3-%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png" alt=""></p><p style="text-align:center">こんな感じ！</p><h3 id="h2c3e821f23">time</h3><p>timeは時間に合わせて数値を変動させるエクスプレッションで書き方は<strong>time*60</strong><br>これを回転のアニメーションに入力した場合、秒間60度回転となります。</p><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6d0f8541144d4235b76ecd08f524693e/time.gif" alt=""></p><p style="text-align:center">timeを使って回転</p><h3 id="hfb98e74173">wiggle</h3><p>wiggleは動きのエクスプレッションで書き方は<br><strong>wiggle(1,60)</strong><br>初めの値は変化する速度、二つ目の値は変化量を表しています。</p><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/41b9c3ca8ecd40cba39786aa5c87c5bc/wiggle.gif" alt=""></p><p style="text-align:center">wiggleで位置を動かす</p><h2 id="h3bcda3e6b0">最後に</h2><p>エクスプレッションは他にもさまざまな種類があるのでまた紹介していきます！</p>

[After Effects]エクスプレッションでアニメーションを操作しよう！

<p>こんにちは！最近After Effectsを勉強しているので面白かったり使えそうだなと思う機能を紹介していきます。今回はモーフィングです！</p><h2 id="h19f84ada1e">モーフィングって？</h2><p>モーフィングは形状が別の形状に変化することで、例えば四角形が楕円形になったり、楕円形が星形になったりすることです。</p><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a56424bd187a4546aaa8e9101269dec9/%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99.gif?w=500&amp;h=500" alt=""></p><p style="text-align:center">こんな感じ！</p><h2 id="h441226ddc9">やり方紹介</h2><p>今回は上のgifのような楕円形から星形への形状変化の方法を紹介します。</p><blockquote>1. 楕円形を作成し、同じレイヤー内でも外でもいいので星形を作成<br>2. 多角形パスの上で右クリックを押し、星形をべジュパスに変換。パス1が&nbsp;&nbsp;&nbsp;&nbsp;追加されるのでキーを打ち、コピーする。すると星形の形状が記憶される<br>3. 星形はもういらないので非表示にする<br>4. 楕円形を2のようにべジュパスに変換し、パスにキーを打ち、お好みのフ&nbsp;&nbsp;&nbsp;&nbsp;レーム数でコピーした形状をペーストする。と完成！</blockquote><h2 id="h3bcda3e6b0">最後に</h2><p>どうだったでしょうか？やり方さえわかれば簡単にできるのでぜひ試してみてください！</p>

[After Effects]モーフィングで図形を変形しよう！

<p>こんにちは！普段うぇぶスタでは、webデザインやプログラミングを勉強中の学生さんに向けた勉強お悩み解決するための情報発信をしています！<br>運営メンバーは6人いて、その中でも私はデザインについて発信しているのですが、今回はうぇぶスタのクマの中の人「こばやしたいよう」についていろいろ紹介していきます！</p><p style="text-align:right"><br></p><h2 id="h9b7fc86181">プロフィール</h2><blockquote>名前：小林大陽(こばやし たいよう)<br>出身：滋賀県(琵琶湖しかないよ（＾ω＾）)<br>趣味：・ファッション(アパレル業界いきます！)<br> ・食べること(甘いものとラーメン大好きです！（フルーツは嫌い）)<br>何してるの？：一応デザイナーの端くれの端くれしてます<br>得意なこと：特にないけど最近はAfter Effectsの勉強してます！<br>自慢できること：色彩検定1級持ってるよ</blockquote><h2 id="haa024e407c">普段何してるの？</h2><p>普段はWebデザインの専門学生として授業を受けていますが、将来は今の知識、技術を活かしてアパレル業界でECやプレス(広報)の職につきたいので、ファッションの知識をつけながらインスタグラムの運営もやっています！<br>ファッションの情報発信をインスタでやっています！</p><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/48fdf21c274940f98ed3310893c78c70/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF.png" alt=""></p><p style="text-align:right">チェックしてフォローしてね！</p><p style="text-align:right"><a style="color:inherit" href="https://www.instagram.com/spread___.official/" target="_blank" rel="noopener noreferrer">https://www.instagram.com/spread___.official/</a></p><h2 id="h476eb41d1b">なぜWebデザインの専門学生からアパレルへ？</h2><p>みなさんなぜ私がアパレル業界へ行くのか疑問に思ったと思います。その理由は<strong>「ファッションの世界で食べていきたいと思ったから」</strong>です！！<br>Webデザインの専門学校に入学した理由はまたいつか、、<br><br>私はファッションが大好きで人生を変えてもらいました。そんなファッションの楽しさを一人でも多くの人に伝えたいと思い、アパレル業界を志望しました。<br><br>就活の時、専門学校なのでもちろん他業界を志望する人は私だけで、相談できる人も少なかったので手探りの状態でしたがなんとかアパレル企業から内定をもらうことができました。<br><br>専門学校に入ったらその道しかないと思っている人も多いと思いますが、今まで学んできたことは絶対に活かせる場面があるので自分のやりたいことを明確にして就活に臨んで欲しいと思います！！！！</p><h2 id="h3bcda3e6b0">最後に</h2><p>この記事を読んで少しでも私やうぇぶスタに興味を持ってくれたら嬉しいです。ではまた！</p>