
卒業制作展④
制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。 本物のお菓子について 苦労した点 クッキーにアイシング(砂糖飾り)で絵を描きましたが、アイシングは水分量の調節と練り具合が鍵になるのでしっかりと練ってひび割れなどが起こらないようにしました。 […]
Read Moreメンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ
カテゴリー: 学校
制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。 本物のお菓子について 苦労した点 クッキーにアイシング(砂糖飾り)で絵を描きましたが、アイシングは水分量の調節と練り具合が鍵になるのでしっかりと練ってひび割れなどが起こらないようにしました。 […]
Read More制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。 ショップカードについて 苦労した点 2案制作し、2つ目に決定しました。1つ目はピンクと茶色で作っており、Webサイトとはまったく別のお店のような印象になってしまったのと、可愛い要素を盛り込み […]
Read More制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。 チラシについて 苦労した点 作業工程の写真を撮るのに、手が汚れているためにかなり苦労しました。手早く作業をする必要のある工程はとくに写真を撮るのが大変でした。また初心者でも手軽に作れるよう、 […]
Read Moreトライデントコンピュータ専門学校で行われた卒業研究制作展終了しました。たくさんのご来場、誠にありがとうございました。 私は2日間ともに午前中に作品の案内をさせていただいたのですが、とくに質問の多かった事項についてと、個人的にがんばったところなどをまとめていきたいと思います。 制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシ […]
Read More個人的にお世話になったフリー写真サイトをご紹介します。 PAKUTASO ぱくたそというフリー写真素材サイトです。高画質の写真素材を無料でダウンロードできるサイトで、登録なども一切不要。楽です。 いったいいつ使うんだ!というへんてこなシーンから、人物の絶妙な表情や画質の良さが際立つ写真など、使ってもよし、ながめてもよしのおもしろい写真素材サイトです。 学校の課題で対談集を作ったのですが、表紙に悩ん […]
Read Moreこんにちは。12月はアドベントカレンダーと称して毎日1記事ずつ書いていきたかったのですがサボってしまっております。今日はパララックスについて書いていきます。 パララックスとはWebサイトのスクロールのスピードに差をつけて、ユーザーの目を惹くデザインを叶えてくれるものです。JavaScriptやjQueryで実装しますが、今回は一からではなくrellax.jsを使って簡単に実装する方法をやってみたの […]
Read MoreSVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。 以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> <style> svg { background-color: #f00; } #svg01 .loading01{ animation: 1s infinite load01; } @keyframes load01 { 0%, 100%{ /* 1秒のとき */ r: 3; } 50%{ /* 0.5秒のとき */ r: 10; } } #svg01 .loading02{ animation: 1s infinite .2s load02; } @keyframes load02 { 0%, 100%{ r: 3; } 50%{ r: 10; } } #svg01 .loading03{ animation: 1s infinite .4s load03; } @keyframes load03 { 0%, 100%{ r: 3; } 50%{ r: 10; } } </style> </head> <body> <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1"> <circle cx="110" cy="150" r="10" class="loading01" fill="rgba(255,255,255,1)" /> <circle cx="140" cy="150" r="10" class="loading02" fill="rgba(255,255,255,1)" /> <circle cx="170" cy="150" r="10" class="loading03" fill="rgba(255,255,255,1)" /> </svg> </body> </html> |
CSSのinfiniteは無限ループです。デュレーションの値(infiniteの後)を書くことで3つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]
Read Moreスマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。 Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> <style> svg { background-color: #ddd; } </style> </head> <body> <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1"> <defs><!-- symbolをdefsで囲むと画面に描画されない --> <symbol id="lamp"><!-- symbol要素で使いまわすことが簡単になる --> <circle cx="100" cy="200" r="40" /> </symbol> </defs> <rect x="100" y="200" width="300" height="100" rx="50" ry="50" fill="#fff" stroke="#000" stroke-width="5" /> <use xlink:href="#lamp" x="150" y="50" fill="rgba(255,255,0,1)" fill="#fff" stroke="#000" stroke-width="5" /> <use xlink:href="#lamp" x="60" y="50" fill="rgba(0,0,255,1)" fill="#fff" stroke="#000" stroke-width="5" /> <use xlink:href="#lamp" x="240" y="50" fill="rgba(255,0,0,1)" fill="#fff" stroke="#000" stroke-width="5" /> </svg> </body> </html> |
信号機を描くコードをサンプルとして載せました。 ぞれぞれ解説します。 […]
Read Moreもうすぐクリスマス。 というわけで期間限定でブログに雪を降らせてみました。 https://www.otwo.jp/blog/canvas_sakura/ ベースとなるJSはこちらを参考にさせていただきました。詳しく解説が載っています。こちらは桜の花をひらひら降らせています。 http://www.shurey.com/js/samples/1_tips10.html ドキュメントの高さを取得する […]
Read Moreトップへ戻るボタンを習ったので復習しながら解説します。 HTML
1 |
<p class="gotop">TOPへ戻る</p> |
CSS
1 2 3 4 5 6 7 8 9 10 |
.gotop{ position: fixed; /*表示場所を固定*/ right: 10px; bottom: 10px; opacity: 0; transition: all .5s; } .is-show{ opacity: 1; } |
JavaScript
1 2 3 4 5 6 7 8 9 10 |
let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる window.addEventListener("scroll", function(){ let scl = window.pageYOffset; //スクロール量を取って変数に代入 if( scl > 200 && scl <= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する }else if( scl > 500 ){ //もしスクロール量が500より大きいなら(おまけです) gotop.innerHTML = "TOPへ戻ろうよ!"; //要素の中身を変える(おまけです) } }); |
JavaScriptの授業は覚えることが多くとても大変ですが、できることも多いので楽しいです。他にも簡単な […]
Read More