chikaのブログ -2ページ目

chikaのブログ -2ページ目

ホームピグアメブロ

芸能人ブログ人気ブログ

24Jun
- 日々観察練習055（サイト）
  こんにちは。chikaです。日々観察練習55回目（サイト観察51回目）です。本日は久しぶりにサイトの観察を行いたいと思います。このところだいぶ迷走していてどうにも記事を書くことができない状態が続きましたが、とにかく触れることが大事だと思うのでなんとか心を落ち着かせて取り組みたいと思います。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は10分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------本日はグラデーションのきれいなサイトがきになったので調べてみました。Teracy | いつでも、ここで会えるから。いつでも集まれる居場所を自由自在に。離れていても隣にいるかのように、大切な人たちと共に生きていける。Teracyがあれば。teracy.io色合いがとても私好みでしたので選ばせていただきました。・フォント：BIZ UDMincho、cormorant infant・画像の激しすぎない動き・ダウンロード部分のチケットのデザインがおしゃれ落ち着いた色合いでグラデーションもキレイなサイト様だなと思いました。フォントもやわらかさとシュッとした感じが好ましかったです。BIZ UDMincho、今度自分も使ってみたいと思いました。何を調べるかを事前に決めておかないと持ち時間が全く足りません。何とかもう少し手を早く動かせるようにならないとですね。頑張らねば。【池袋の賃貸事務所・賃貸店舗】
21Jun
- 日々観察練習054（コーディング）
  こんにちは。chikaです。いろいろなことを並列で行うのがへたくそなのでうまく優先順位をつけてこなしたいのですが修行が足りませんね。ひとまず持ち時間の中で今気になっていることをどんどんしらべていきたいなとおもいます　。本日はhtmlやcssのコーディング規約はどんなものがあるのかについてです。多くの場合googleの規約を見ているのではないかとは思うのですが、思い込みはよくないので検索します。「webサイトコーディング　規約」で検索。HTML/CSSコーディング規約(ガイドライン)とは？サンプルDL有り | 株式会社Wakka Inc.HTML/CSSコーディング規約について、他企業さまでもご利用いただけるよう編集が可能なサンプルファイルの配布とともに、HTML/CSSコーディング規約の重要性について解説していきます。wakka-inc.comコーディング時に悩むのはdivでどこまで囲むのか、ulとか別のものを利用することができるのかでしょうか。最初に教えてもらったときにdivを多用しすぎるなと言われたのですが、そちらも多分プロジェクトごとにルールが異なるので、divを使う方が全体的に分かりやすくなるのであればそれはそれでよいのかな…ともおもっております。そもそも自分もまだ修行不足でちゃんと使い分けできていない気がするので…可読性の高いコードが書きたいです。あとは意識が弱いので気付くとpxで全部きってしまっていたりするのでvwとかem、remなど適宜使えるようになりたいです。vwの計算や余白の計算がとても苦手なのでツールや早見表のちからをお借りすることが多いです。まだまだやることはたくさんあるので頑張ろう。【池袋の賃貸事務所・賃貸店舗】
19Jun
- 日々観察練習053（書籍検索）
  こんにちは。chikaです。持ち時間がさらに短くなってしまったのでとにかくデザインにかかわることを調べたりチャレンジして足跡を残していきたいなと思います。昨日はデザインツールの練習用に何かドリルのようなものはないかを調べてみました。自分が持っていたのは・デザインのドリル・イラレの5分ドリル・フォトショの5分ドリルでした。最近見出し部分を装飾したりどのようなあしらいがあるのかが気になっているので、どのような書籍があるのかを検索してみたいと思います。「デザイン見出しあしらい　書籍」で検索。・［DESIGN IDEA 100］タイトルまわり　BNN・あたらしい、あしらい。「デザイン見出し　書籍」・パッと目を引く! タイトルまわりのデザイン表現・アレンジ・オリジナル・組み方で差がつく！タイトル文字のデザイン・booknext タイトルデザイン本 2022年改訂版「けっきょく、よはく。」「ほんとに、フォント。」は持っていましたが、「あたらしい、あしらい。」はまだだった模様。個人的には「パッと目を引く!」と「アレンジ～」が前から気になっているので、後日チャンスがあれば紙媒体で入手したいところです。電子書籍は時々セールをしていたり持ち歩くのに便利ではあるのですが、やはり紙の本をめくって眺めている方が見やすいと感じるのですよね。まだまだ電子書籍と仲良くできていないだけかもしれませんが。読んだことがあっても内容をよく忘れてしまうので何度も読み込みませんとね。頑張ろう。【池袋の賃貸事務所・賃貸店舗】
18Jun
- 日々観察練習052（その他）
  こんにちは。chikaです。とにかくちょっとでも手を動かすために、本日はドリルを検索してみようと思います。「イラレ　フォトショ　ドリル」で検索。・フォトショの5分ドリル練習して身につけるPhotoshopの基本・Photoshopのドリル！CC,CS6,CS5,CS4,CS3,CS2,CS対応・Photoshopでトライ！デザインのドリルバナートレース・フォトショップの練習問題フォトショップの練習問題 | フォトショイラレの練習問題practice.nyanta.jp「イラレ練習お題」で検索。【総まとめ】2021年公開のすごいIllustratorチュートリアル、作り方厳選まとめ【総まとめ】2021年公開のすごいIllustratorチュートリアル、作り方厳選まとめこの記事では、2021年のあいだに公開された、特に確認しておきたいIllustratorのデザインチュートリアル、つくり方をまとめてご紹介します。photoshopvip.net独学でOK！Illustratorのおすすめ勉強法【初心者向け３ステップ】独学でOK！Illustratorのおすすめ勉強法【初心者向け３ステップ】Illustratorの勉強を始めたい理由は人それぞれですが、入り口はみんな一緒。この記事では簡単に始められるよう、３ステップから紹介していきます。nozakichi.comざっとこのような感じでしょうか。フォトショの5分ドリルは電子書籍を持っているのですが、5分…で終わらせられるように頑張りたいと思います。【池袋の賃貸事務所・賃貸店舗】
11Jun
- ちょっと一息010
  こんにちは。chikaです。学生の頃からお絵かきが好きで、お絵かきが出来ればデザインもできると数年前まで思っておりました。が、勉強できる場所に通った際に実際に教えてもらったり手を動かしてみて分かったことは、「アート」と「デザイン」は異なるということでした。確かに自分がイメージしたものをアウトプットできるのは強みではありますが、それは自己表現であって機能性や見やすさに配慮したものではないということを知りました。（ブログの最初の方でもぼやいていたような気がしますが）そのため必要な情報をそろえることでまずつまり、その後も適切なフォントや配置、あしらいでつまり続けました。現在も観察が足りなくて必要なものを置く段階でとても時間がかかっています。ということで何とか必要な情報をそろえたあと、画面の設計をできるだけ素早く完了し、デザインもいい感じにできるようになるのが直近の目標になります。自分の作業の振り返りをしていると問題になってくるのがやはりこの点。・アウトプットの量が圧倒的に少ないどうすれば手を早く動かせ、数を打つことができるのか。作業時間は常に確認しているつもりですがなかなか早くなりません。見ている数がそもそも少なすぎるのが原因だと思い観察をはじめましたが、そちらも効果をあまり感じることが出来ず暗礁に乗り上げている状態です。案を出す際に手が止まる。ものを作成するときに手が止まる。それらの原因はどう考えてもアウトプットの数だと思うので…見てテキストに落とすだけではなくワイヤーフレームを紙に描く、イラレやフォトショのドリルをこなすなどの対策が必要な気がしてまいりました。ただ、この限られた時間の中でどうそれらをこなしていくのか…もうちょっと考えさせていただこうと思います。ひとまず今回読ませていただいたページ。デザイン思考とはなにか？デザイン思考のプロセスと4つのフレームワークを紹介 | PROFFIT新サービスの開発や既存商品の改善、はたまた経営課題そのものを解決へと導くアプローチに「デザイン思考」があります。グローバル企業を中心に広まったデザイン思考ですが、近年では国内企業でも実践する会社が増えてきました。しかし、抽象度の高い思考アプproffit.jpずっとぐるぐるしているのではやくこれだというパターンを見つけ出してコツコツしたい気持ちです。【池袋の賃貸事務所・賃貸店舗】#池袋
07Jun
- 日々観察練習051（チラシ）
  こんにちは。chikaです。はじめはwebに絞しぼって書き残しておこうと思っていたのですが、なんだかんだいろいろなものを見る機会が増えてきましたので「web観察」以外も含めたいなと思い、本日から「web」の部分を「日々」にこっそり変えてみました。何の観察なのか分かるよう末尾にwebとかチラシとか記載しておけば何とかなるのではないか？という計画も何もない思い付きで変更してしまったので、うまくいかなかった場合はその都度変更・修正していきたいと思います。というわけで、本日はチラシのデザインについて観察出来たらよいなと思い、どんなギャラリーサイトがあるのか検索。キーワード：チラシデザイン参考で、一番最初に出てきたサイト様がこちら。https://chira-saku.jp/blog_flier/blog_design/6985/・パンフレット&チラシ見本帳・Pinterest・CHIRASAKU・typographicposters・shufoo・webdesignerPinterestは結構前にどこかで「見た方が良い」と言われた記憶があり、一応アカウントを作成して見られる状態になってはおります。ピンのつけ方であったり自分でジャンル分けするのはちょっと四苦八苦しますが、検索すると確かにたくさん良いデザインに出会えるので目を肥やすにはよさそうだと思いました。検索するだけならとても簡単なので。あとshufooはお買い物のときにたまに見ていたので名前が載っていてなるほどと思いました。スーパーなどのチラシもちゃんと設計されたデザインですものね。あのチラシを作ろうと思ったらちゃんと観察しないと用紙内に絶対入らない自信があります。そして記事を書いていらっしゃるサイト様のサイトCHIRASAKU。広告のデザイン事例を見せていただきました。確かにいろいろな広告のデザインをされている会社さんのデザイン事例ページをたくさん観察するのも、引き出しを増やすにはよい手だと思いました。どれもきれいで憧れてしまいます。検索ですぐに出てきたサイト様をもうひとつのぞき見。https://www.vanfu.co.jp/column/design/flyer-design-reference.html・今日のフライヤー　TODAY’S FLYER・Creative Markett・FAJP・Behance・typo/graphic posters時間が足りなくなってきてしまったのでこのあたりまでにいたしますが、現在気になっているのはチラシの見出し部分なのでパンフレット&チラシ見本帳とPinterestをまずは覗いてみるのがよさそうかもしれません。webのデザインはモニターのサイズを意識しますが表示幅や高さはスクロールさせたりコンテンツ自体に動きをつけたりすれば見せられてしまうので、決められたサイズの中で表現することの難しさなどまた違う難しさがあるのだろうな…と思ったのでした。とにかくwebにこだわらずたくさん見て自分の引き出しを増やそう。【池袋の賃貸事務所・賃貸店舗】
05Jun
- ちょっと一息009
  こんにちは。chikaです。ちょっと一息009回目です。ここのところ少々息切れ気味で更新が滞りそうな気配を察知したので、本日もサイトではないのですが調べたものをメモしていくことに。日々調査はそれなりにして過ごしていると思うのですが、急いでいたりすると解決してそれきりにしがちでまた遭遇した時に忘れてしまっていたりするのでそのロスを少しでも減らす目的です。最近調べたものですと「イラレでトンボを設定する方法」でしょうか。日頃はWeb用の画面に使用するものを扱うのに使用していますが、チラシやパンフレットなどの紙媒体のものを作成する際に必要な環境設定にはどのようなものがあるのかがきになったので調べました。Webはわりと軽量化する方向でいろいろなものを用意すると思っており、画像などもきれいに見えるギリギリを攻めている感覚なのですが、紙媒体は手に取ってじっくり見るため高画質、とにかくキレイで少しの色味の違いも許さないぞという感覚です。（稚拙な表現で恥ずかしいですが）そして画面上に表示させるのとは異なり紙媒体としてみんなの手元に届くまでに大き目の容姿に印刷して適切なサイズに切り抜くという工程が必要になるという認識です。手作業で用紙を切り抜いたことは多分ほとんどの方があると思うのですが、目視で望んだ形に切り抜くのは結構難しいと思います。自分はなんとなくでしか出来ません。より正確に裁断するには目印が必要です。そしてそれがトンボと呼ばれるものです。前置き長すぎますね。時間が足りません。端折ります。ということで紙媒体のもののデザインをする際は目印が必要ということで、それはどんな順番で何を用意したらよいのかわからなかったので検索。トンボではなかった。トリムマークでした。Illustrator（イラレ）でトンボ（トリムマーク）を設定する方法とその役割を解説|操作・設定|Illustrator逆引き辞典Illustrator（イラレ）で、トンボ（トリムマーク）の設定する方法と、トンボ（トリムマーク）が役割を紹介。【How to形式で工程を全解説】【Illustrator逆引き辞典】 www.mdn.co.jpトリムマークを出すメニューがあることを知りました。環境設定も変更が必要なのですが時間切れなのでまたどこかでメモを残しておこうと思います。【池袋の賃貸事務所・賃貸店舗】
03Jun
- ちょっと一息008
  こんにちは。chikaです。ちょっと一息008回目です。息切れしながらもなんとか先日観察練習50回目を迎えることが出来たので、本日はちょっと一息つこうかと思います。ここのところWebサイトについての観察をしておりましたが、個人的にはフォトショやイラレと呼ばれるツールとも仲良くなりたい気持ちなのですよね。何か作業をするときにもたつかないように日頃から使うようにしたいなと思うのですが、気持ちだけで手を動かせていないのが現状です。ネックになっているのは①練習するにも「何を作ればよいのかわからない」②時間の捻出③継続させる仕組みでしょうか。①は書籍などで出ているドリルをコツコツやるのが自分の性にもあっていてよさそうな感じです。なんとなく同じことを以前もどこかで書いたような気がしてきましたが。はい。で、それを習慣化させるのにどこにねじ込むかが問題なわけですが。帰宅後やることを済ませたあと自由にできる時間は２時間あるかどうか。それ以上になると睡眠が5時間を切ってしまい日中の作業効率が著しく下がるので絶対に増やせません。理想は8時間ですが、それだと23時に寝ないといけないのでそれも難しいですね。（食後2時間は寝られませんし）なので7時間睡眠を目指しております（体力回復が中途半端にはなりますが頭は割とスッキリできる気がします）。②が可能そうな時間帯は0時から寝るまでの１時間程度になりそうです。昼休みという手も考えたのですが、食べる速度がものすごく遅いので無理でした。（食道が細いのか普通に食事をしていてもよく詰まってしまうので…毎回1時間近くかかる）あとはいかにパソコンの前に着席するかが問題です。夜中0時の時点で体力的にはすでに限界を迎えつつあるので、なにかそれをおしてでも手を伸ばそうと思えるものがあるとよいのですが…情熱が足りないと言われてしまうとそこまでなのですが、できたら無理せずスッとできることが望ましいので悩みますね。…10分でもパソコン触ったらご褒美がもらえるスタンプカードでも用意すべきでしょうか。iPadかノートパソコンならもう少し触る頻度高く行けるのですが…画面が小さくて若干厳しめだったりします。…③はスタンプカードにしてみよう。本日は内容がない脳みその整理回になってしまいましたが、ぐるぐるいろんなものを回すために必要な時間だったということでお許しいただければと思います。コツコツファイトファイト。【池袋の賃貸事務所・賃貸店舗】
31May
- サイト観察練習050
  こんにちは。chikaです。サイト観察練習50回目です。物凄くスローペースですがなんとか50回を迎えられました。レベル的にはとても低いですが、ひとまず50回はサイトを見たぞというところを喜んでおこうと思います。自信を育てていくためにも小さなことでも褒めていく方向で。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------DearLilyハンドクリームのLPデザインランディングページ（LP）デザインを集めました。東京都渋谷区宇田川町のDearLily 様の楽天に掲載されているランディングページです。DearLilyハンドクリームのLPデザイン。rdlp.jp前回LPの話をしていたので、今回は女性向けの商品を取り扱っているLPをピックアップさせていただきました。LPサイトは着地してからお客様がアクションを起こすまでの流れを1ページで行う必要があるので、簡単にまとめてしまうと「全部盛り」しなくてはならないということですよね。その際に盛り込まれる内容が大体どのような項目になっているのかが気になったので、まずはどんなブロックで構成されているのかを書き出してみようと思います。----------------------------------------------・どんな商品なのか（エステサロン開発の高保湿ハンドミルク）・キャッチ（ひと塗りで指先までうつくしい魅せたい手に）・商品の目玉ポイント（ヒト型セラミド3種配合、ホワイトティの香り）・どんな悩みが解決できるのか　ダメージを受けやすいがじっくりケアするのが難しい　→目指したのが"ひと塗りのリラクゼーション"・キーワード「手のオールインワンミルク」・手が荒れる原因（イラストでで説明）・どうすれば予防・改善できるのか（イラストでで説明）・商品が持つ特徴の説明（バリア機能が強くなる根拠などポイントごとに）----------------------------------------------こんな感じ…に読み取りました。今回の流れをまとめてみました。①どんな商品か（覚えやすいワンフレーズ）←ハンドクリームだとわかった②使うとどうなるのか（イメージと文章）←ひと塗り（=簡単）で魅せたい（=荒れていないきれいな）手にできる③悩みが発生する原因と解決策（商品の有用性）④商品の注目ポイント（何に効くか）あとは商品の成分など詳細と購入ボタン、お問い合わせフォームなどがあればよさそうな気がしてきました。パッと見たあと脳内での整理が難しい人種なので、どうしてもじっくりひとつずつアウトプットしてそこからまとめるという手間が必要になってしまいますが、ちゃんとまとめてそれを見直すことが出来れば徐々に浸透してくるはずだと信じております。時短できるまでのコストが高めですが、あきらめず継続したいと思います。それではまた次回。【池袋の賃貸事務所・賃貸店舗】#池袋
29May
- サイト観察練習049
  こんにちは。chikaです。サイト観察練習49回目です。本日は普段お買い物するようなECサイトと商品購入や目的の情報へ誘導する？ランディングページの違いは何かあるのだろうかというふとした疑問を調査してみようとおもいます。お買い物ができるサイトは全部ECサイトだと思っていたのでECサイトとLPサイトがどう違うのか整理がしたくなった感じです。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------まずは「ECサイト　lp」で検索。ECサイト、LPの3個の違い！メリットと使い分けを解説！ | Union Mediaインターネット上で商品やサービスの販売を行う方法としてECサイトもLP（ランディングページ）がありますが、それぞれの意味や特徴は異なります。この記事では、ECサイトとLPそれぞれの解説を行い、それぞれのメリットと、使い分けについて説明します。union-company.jp上記の記事を読ませていただき、メモした内容をぺたり。------------------------------■インターネット上で商品やサービスの販売を行う方法は2通りある・ECサイト・LP■ECサイトとはEC：Electronic Commerce（電子商取引サイト）インターネット上で商品やサービスの売買を行うことのできるサイト■ECサイトの種類・自社サイト型（企業やブランドそれぞれが独自で作成したECサイト）・モールサイト型（Amazonや楽天などが提供するECサイト）■LPとはLP：Landing Page（訪問したユーザーが最初に到達するページ）■ECサイトとLPでの目的の違いECサイトの目的：より多くの商品を販売し購入してもらうこと（商品のカタログのように網羅的）LPの目的：特定の商品の購入や、その商品に関する資料請求といったアクションを短期的でも獲得すること（１つの商品に特化しその商品を集中的に販売する）■ECサイトとLPでの客層の違いECサイトが狙う客層：既存の顧客向けLPが狙う客層：新規の顧客向け■デザインの特徴ECサイト：・わかりやすいボタンを利用する・トレンドを取り入れたデザインLP：・ページ内にフォームを設置する・ユーザーの不安や疑問を解消するようなデザイン・リンクが少ない■メリットECサイト：顧客データの収集と利用LP：高いコンバージョン率を狙える■ECサイトとLPの使い分けECサイト：複数の商品に関して取り扱う場合LP：自社商品・サービスの中で最も売り出したいものがある場合------------------------------なるほど…。なんとなくで感じていたものが言語化されていてわかりやすかったです。違いが整理されてきたら今度はLPにはどんな項目がどんな順番で載っているのかが気になってきました。こちらの記事にも書かれていましたが着地してからアクションを起こしてもらうまでの流れを今度ジロジロ観察してみたいと思います。どれをとっても奥が深いので自分の血肉にどこまでできるのか常に不安ですが、とにかくコツコツ積み上げ頑張ります。それではまた次回。【池袋の賃貸事務所・賃貸店舗】
28May
- サイト観察練習048
  こんにちは。chikaです。サイト観察練習48回目です。本日はMUUUUU.ORGというギャラリーサイトさんを覗かせていただき、本文に縦書きを使っているサイト様をピックアップしてみました。以前課題でサイトを作成する際に縦書きのサイトにチャレンジしてみたことがあるのですが、フォントのサイズ感が今一つしっくりこなくて、もっさりしたLPになってしまった記憶があります。なのでどうしたらもっと引き締まった感じにできるのかが気になって覗いてみました。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------今回観察させていただいたサイト様酔鯨酒造株式会社｜SUIGEI Brewing Co.,Ltd高知県の日本酒醸造元「酔鯨酒造株式会社」の公式WEBサイトです。“Enjoy SAKE Life 世界の食卓に酔鯨を。”suigei.co.jp使われている文字（img）や画像やイラストがすでにおしゃれでカッコいいです。ベースが白でアクセントが紺色という色のチョイスもとても好みです。あとは一番シュッとして見えるなと思ったのがやはり見出しと本文のフォントサイズのジャンプ率と行間でしょうか。自分が縦書きサイトにチャレンジした時、読みにくいかな…？とわりとフォントも大きくしてしまったのですが、14pxでも十分読むことができるのだなとあらためて思いました。フッターも縦書きなのですね。どこを横書きにしてどこを縦書きにするのかはバランスかとも思うのですが、縦書きのフッターもオシャレだなと思いました。いつか使ってみよう。画像も大きいものと小さいもののサイズにメリハリがあるのもきっとシュッと見えるポイントなのでしょうね。おしゃれだなと思いました。それではまた次回。【池袋の賃貸事務所・賃貸店舗】
24May
- サイト観察練習047②
  こんにちは。chikaです。サイト観察練習47回目②です。前回は特設サイト・キャンペーンサイトから検索して、イラストを使ったサイト様を観察させていただいたところでした。イラストを動かす方法にはどのようなものがあるのかを本日は検索していけたらなと思います。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------今回はhoriba様のサイトを覗かせていただいている最中でした。TOPにイラストを使ったサイト様は今までにも見てきたのですが、実際にどのように動かしているのかを調べるのははじめてになります。どのようなキーワードで検索をすればたどり着けるでしょうか。ひとまず「html css js イラストを動かす」で検索をかけてみます。PNGアニメーション（CSS） | 動くWebデザインアイディア帳coco-factory.jp最初に出てくるのはやはり動くWebデザインアイデア帳というサイト様ですね。書籍でも持っておりますが（必要なところだけ見て積み本になってしまっているのですが）ちょっとしたアクセントに動きが欲しい時にお世話になりました。【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き） | 東京のホームページ制作 / WEB制作会社 BRISK最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそb-risk.jp見出し回りなどにもよさそうですね。なるほど。要素をフワフワさせたいzenn.devそして見つけたワードが「要素をふわふわさせたい」確かにふわふわしている感じでした。色々検索して…なんというキーワードで検索したかを思い出せなくなってしまったのですが、こちらのサイト様も発見したのでペタリ。画面いっぱいのイラストを動かす裏技 | ブログ | 株式会社モンブラン｜熊本のホームページ制作こんにちは。モンブランの江藤です。突然ですがみなさん、画面いっぱいに散りばめられたイラストのデザインをコーディングするとします。もちろんイラスト単体でも素敵なWebデザインですが、どうせなら動かしたいですよね？？でも画面いっぱいにあるイラス...mont.jpイラストをそれぞれ動かすのではなく画像にしてそれを動かすというのがなるほどでした。ひとつづ設定するのもよいですが、確かにこの方法だとコードは少なくて済みそうな予感がします。イラストを動かす小技ひとつとってもいろいろな方法があるので、実際に何を使うのかはその都度選んで使うのがよさそうですね。今回は画像にして動かすというアイデアを得たので引き出しがひとつ増えたような気がしました。それではまた次回。【池袋の賃貸事務所・賃貸店舗】
22May
- サイト観察練習047①
  こんにちは。chikaです。サイト観察練習47回目①です。本日はWeb Design Gardenというギャラリーサイトさんを覗かせていただき、なんとなく特設サイト・キャンペーンサイトで検索を行い出てきたサイト様からピックアップしてみました。個人的になのですが写真を使うデザインも素敵ですがイラストのみのサイトにも憧れがあったりします。イラストを使用すると印象が柔らかくなるような気がするので。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------今回観察させていただいたサイト様おもしろおかしくの力で何ができるのだろう。 | HORIBA Our FutureHORIBAの社是である“おもしろおかしく”は、創業以来、わたしたちが大切にしてきた考え方です。その考え方を土台に未来を実現していくために、ビジョン、ミッション、そしてバリューをつくりました。わたしたちが目指す、おもしろおかしい未来。みなさんも一緒に実現しませんか？www.horiba.com「おもしろおかしくの力で何ができるのだろう。」というフレーズに興味を惹かれて覗かせていただきました。top部分にモーションのON・OFFボタンがあったのが個心的には配慮を感じて好感でした。時々ものすごく動くのでそれだけで疲れてしまって最後まで読めなかったり（読んではいるのですが内容が頭に入ってこなかったり）、とても重いサイト様があるので、動きを軽減できるボタンがあるのはすごいのではないかと思いました。（動いたほうが伝わることもあるので時と場合に本当によります。）動きすぎると負えなくなってしまうしょぼしょぼの目の私でも安心してみていられるイラストの緩やかな揺れ。どうやって表現しているのかが気になりました。イラスト　左右に動く　のようなキーワードで出てくるだろうか。時間切れになってしまったので検索はまた明日にしたいと思います。それではまた次回。【池袋の賃貸事務所・賃貸店舗】
21May
- サイト観察練習046②
  こんにちは。chikaです。サイト観察練習46回目②です。本日は昨日の続きで「サイバーパンク」なサイトについての調査をするところからになります。サイバーパンクなサイトを自分で作成する機会があるかと言えばなかなか機会はなさそうですが、「こういうモノを使っている」という気付きがあるはずですので未知のジャンルを覗いてみたいと思います。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------今回観察させていただいたサイト様SEVEN's CODE音楽は僕の「心」を、「肉体」を、揺らす。ー世界を暴くリズムアクション「SEVEN's CODE」www.sevenscode.jp昨日読ませていただいた記事の中にあったサイト様の中で飛べたサイト様を覗かせていただくことにいたしました。リズムアクション音楽ゲーム…音楽ゲームはタップがへたくそなのであまり触れてこなかったのですが、ゲームはそれなりに昔はやっておりました。メイン部分にあるイラストも確かに紺や黒の暗いベースカラーに、鮮やかなピンクやブルーの配色ですし、ネオンではありませんが発光しているような塗り方の部分もありますね。スクロールすると背面の画像が切り替わるのはSANKOU！さんのサイトを見させていただいたときにも遭遇した技ですが、そういえばこれはなんという呼び名なのでしょう。以前調べたような気もするのですが思い出せないです…スピーカーボタンがありました。ONにすると音楽が流れそうですね。あとはyoutubeの埋め込み…があって、様々なメニューはヘッダーではなく左側にあるのですね。ゲームをダウンロードするためのGooglePlayとAppleStoreのバナー、各種SNSへのリンク。TOPページに置かれているもの自体はシンプルで動きすぎず私好みでした。どのようなゲームなのか気になるので他のページもみたいですが、持ち時間がもうないのでまずはまとめませんとね。・黒などの暗い色がベース・アクセントにピンクや青の配色・六角形を敷き詰めた画像・フォント：NewRodinPro-DBニューロダンというフォントはをはじめて知りました。他のサイバーなサイトではどのようなフォントが使われているのかが気になりました。調べるとまだまだ奥が深そうです。次の機会にまた調査してみよう。今回の流れ以外で調べたときにこちらも気になったのでなんとなく忘れないように張り付けておこうと思います。これはもうどう動かしているのかわからないので…もう少し修行を積んでからもう一度見ようと思います。サブカルチャー事業部 | 株式会社メイクリーHack The DNA of Subculture. 株式会社メイクリーのサブカル事業部紹介ページsubculture.makery.co.jpそれではまた次回。【池袋の賃貸事務所・賃貸店舗】
20May
- サイト観察練習046①
  こんにちは。chikaです。サイト観察練習46回目①です。本日は前回「スタイリッシュ」というのワードが示す範囲が広くて難しいという話をしたのですが、そこからの派生で「クール」「カッコいい」について考えてみました。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------今回観察させていただいたサイト様-自分の中での「クール」は表現が難しいですがどちらかというと「渋い」ものというイメージがあります。例としては水墨画のような感じ。白をベースに単色の濃淡で流れが構成されている…イメージです。私の考えるカッコいいです。ですが世間一般ではどうなのかがわからずだんだん不安になりまして。心配からちょっと検索したところサイバーパンクという単語に出会いました。サイバーパンク…近未来、SF、人や機械が出てくる感じのものという雑な認識しかなかったのですが、もしかしたらこれも「カッコいい」に該当するのではないかと思いさらに覗いてみました。そしてたどり着いたのがこちらの記事。https://spc-jpn.co.jp/blog/23717/・グリッチエフェクト・紺や黒の暗いベースカラーに、鮮やかなピンクやブルーの配色・ネオンエフェクトまた知らない単語が出てきました。グリッチエフェクト。引用させていただくと、「コンピュータープログラムの何らかのエラーが原因で、一瞬画面が乱れたような見た目を再現したもの」「バグ」とのことで、これは…前回の「シャシャシャシャシャシャシャと変換される文字列」的なやつのことではないでしょうか。そうなんですね。グリッチエフェクトというのですね。思わぬところで呼び方を知ることが出来ました。ネオン風のロゴなどは最近はやっている印象ですよね。なるほど。時間になってしまったのでこちらの記事で紹介されていたサイト様は明日観察させていただこうと思います。それではまた次回。【池袋の賃貸事務所・賃貸店舗】
17May
- サイト観察練習045②
  こんにちは。chikaです。サイト観察練習45回目②です。本日は昨日の調査の続きとなります。15分という持ち時間の中でできることをするのは取捨選択が結構大変ですが、できるだけ忘れないようにたくさん書き残しておきたいと思います。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------今回観察させていただいたサイト様X.1 株式会社エックスポイントワン京都・東京のデジタルソリューションの企画開発カンパニー（スマホアプリ・ECサイト・業務システム・ホームページ等）x-point-1.net昨日、気になった以下の技術についての検索がうまくいかないというところまでお話をしておりました。・うにょうにょと伸縮したり変形している図形・シャシャシャシャシャシャシャと変換される文字列検索は適切なキーワードを入れることが出来れば割と簡単に欲しい情報にたどり着けることが多いのですが、キーワードが分からない場合当たり前ですが難航しがちです。今回も擬態語をいろいろ用いて検索をし、遠回りをしながら集めてきました。①うにょうにょと伸縮したり変形している図形JavaScriptで実装！理想の「うにょうにょ動く円」を求めて… | 株式会社ニジボックス[markdown] こんにちは、新人フロントエンドエンジニアの坂本です。もうすぐ11月なんですね！早いですね！もう...入社から半年もたってしまいましたね.. 2回目の投稿となります今回は、最近気になってしょうがない「うにょうにょ動く円」を作って遊びたいと思います。今回の投稿は、理想の「うにょうにょ動く円」をどうやったら作れるのかについて追究していく内…blog.nijibox.jp「うにょうにょ動く　図形」のようなワードで検索した際にたどり着いたサイト様覗かせていただいたら確かに運用女御いておりました。datGUI.jsというプラグインがあることを知りました。そこからまた検索を重ねて、なめらかな曲線を使った円や楕円などの図形のことを「流体シェイプ」と呼ぶらしいことを知りました。さらに検索。SVGモーフィングでぬるっと変形するアニメーションを実装しよう！ | 株式会社ロジカルスタジオ早速本題に入っていきますが、みなさん、「モーフィング」ってご存知でしょうか？なんかこう、一言で言うと「アハ体験」で使われる手法ですね。マイケルジャクソンのMVでも使用されていたことで有名なようで...www.wantedly.comそしてたどり着いたのがこちらのサイト様「SVGモーフィング」というワードが出てきました。どうやらこれが図形を動かすための技の名前のような気がしてきました。目的の動きに近いグラデージョンのかかった円がうにょうにょしていました。これがそうなのではなかろうか。②シャシャシャシャシャシャシャと変換される文字列こちらが本当に難航しました。なんと表現すればよいのか全然わかりませんでした。「シャシャシャ」とか「ぐちゃぐちゃ」とか、とにかく擬態語と「文字が変化する」を組み合わせて検索を行いました。で、たどり着いたのが以下のサイト様CSSだけでブルブル震わせる | q-AzCSSだけで文字や画像をブルブル震わせてみます。複雑な感じにブルブル震わせることもCSSを細かく記述すれば出来るのですが、なるべく短いシンプルな記述でブルブル震えるよう見える感じにしてみました。CSSだけでブルブルCSSのanimationを使って永久アニメーションをさせます。HTML<spaq-az.netブルブル…ではない気がしてきました。さらに検索を続けアルファベットがランダムに変化して出現 | 動くWebデザインアイディア帳coco-factory.jpランダムに変化！確かに「ランダム」という表現かもしれません中を覗かせていただきました。多分これです。これをホバーした時に繰り返している状態なのではないかと予想しました。隙間時間でちょこちょこ検索していたのですが、本当に結構な時間がかかりました。でもこれで類似の動きは再現できそうなので、その時が来たら使うことが出来そうです。気が付いたら15分以上たってしまっておりました。でもこれだけは貼って残しておかないとと思っていたので一安心です。それではまた次回。【池袋の賃貸事務所・賃貸店舗】【看護のエンタメサイト | ナースのHAPPYLAB】
16May
- サイト観察練習045①
  こんにちは。chikaです。サイト観察練習45回目①です。15分で観察とまとめは難しい！ということで、記事についてはその日で完結しなくてもよいという方向で進めることにいたしました。本当は決められた時間の中でちゃんと完結するというのも目標のひとつなので、それを時間制限なしにしてしまうのはどうなのかなと思うところはあるのですが、15分にこだわりこなしても自分の中に印象として何も残らないくらいなら好きなだけまずは調べたりしてみる方が自分にはよさそうな気がいたしました。色々なれてきたらまた時間を意識すればよいので、まずは興味あることをとにかく掘り下げる方向で行きたいと思います。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------取り消し線まみれになってしまいましたが、今日は先日気になったことを調査するにあたり覗かせていただいたサイト様の観察記録をぺたぺた貼らせていただこうと思います。本日観察させていただいたサイト様X.1 株式会社エックスポイントワン京都・東京のデジタルソリューションの企画開発カンパニー（スマホアプリ・ECサイト・業務システム・ホームページ等）x-point-1.netサイトを見させていただいたときに感じたのはシンプル、かつスタイリッシュでした。「シンプル」はなんとなくイメージがつかみやすい気がするのですが、なにをもって「スタイリッシュ」と言うのか…その単語を使っておきながら個人的に表現が難しいなと思いました。シュッとした感じ？最先端？ひとまず感じたのは・やわらかさ（イラストや丸みのある図形、色合い）・シンプルさ（余白の大きさ、過剰にコンテンツが動きすぎない、フォントの色は白か黒の二色）・透明感（レイヤーが背面と全面で分かれているように見える部分など）・無駄の少ないデザイン（文字回り、スクロール時の操作感がごてごてしておらずシュッとしている）でした。そして個人的に特に気になったものがふたつほど。・うにょうにょと伸縮したり変形している図形・シャシャシャシャシャシャシャと変換される文字列何を言っているのかわからない表現で申し訳ありません。でも自分にはそう見えたのでそのままを書かせていただきました。このふたつについて検索してみたのですが、どのようなワードで検索すればヒットするのか本当に該当するワードが分からなくて今回はとても苦戦しました。観察や調査の時間はフリーにしましたがブログ更新用の持ち時間は15分と変わらないためタイムアップです。残念。肝心の検索結果についてはまた明日書き込んでいきたいと思います。事後のことを書くのにも四苦八苦しているので、文章を整理して書く力も鍛えないといけませんね。語彙力がないことも今回の検索で思い知りましたし。ファイトファイト。【池袋の賃貸事務所・賃貸店舗】【看護のエンタメサイト | ナースのHAPPYLAB】
14May
- サイト観察練習044②
  こんにちは。chikaです。サイト観察練習44回目②です。昨日15分以内にどういった技術なのかを検索しきれず悔しかったので引き続き再チャレンジしてみました。あの後該当の動きは言葉で表現するとどんなものに当てはまるのかを冷静になったところで考えてみたところ、「スロット」の動きに似ているのでは？と思い当たりましたので、早速「web スロットのように文字が出る」で検索してみました。ひとまず昨日観察させていただいたサイト様のURLを再度ぺたり。株式会社デジタルガレージ（Digital Garage, Inc.）国内最大規模の決済プラットフォーム事業を軸に、マーケティング、スタートアップ投資事業、最先端テクノロジーを活用した新規事業を展開。株式会社デジタルガレージ（Digital Garage, Inc.）は、持続可能な社会に向けた「新しいコンテクスト」をデザインし、テクノロジーで社会実装します。www.garage.co.jpそして今回たどり着きましたサイト様をぺたり。【コピペOK・CSSだけ】マウスオーバー時にテキストがスロットのように回るアニメーション | レンちゃんとペンタテキストをマウスオーバーすると、スロットマシーンのようにアニメーションされるCSSマイクロインタラクションです。ナビゲーションhover時のアクセントなどにピッタリの演出です。renandpenta.com仕組みを確認してみますとなるほど。テキストをふたつ用意し、見える範囲を限定して上方に動かしていたのですね。つくり的にはシンプルで自分にも作れそうな気がしてまいりました。観察させていただいたサイト様のコードから読み取ることは出来なかったのですが、解説の方法でなんとか実現は出来そうです。どのように違うのかはまた必要な場面に遭遇したら見比べることにして、今日は「文字をスロットのように動かす方法」があることを知れたので良しとしたいと思います。個人的には静的でもちゃんと整えてあげればとてもきれいなサイトにはできると思うのですが、こういったちょっとした動きも自分で実装できるとちょっとだけ嬉しい気持ちになれますよね。どんなサイトにするのかを考える時に引き出しが少ないと選べる形が少ないですが、こういったちょっとした小技をいっぱい持っていればいざという時に一味加えることができるのだろうなと思ったのでした。まだまだ観察が足りないのでもっと精進せねば。好きなように観察して掘り下げるスタイルも悪くないのかなと今回思いました。15分ですべてを見て記事を書くのはやはり自分には難易度がものすごく高いです。なので今後も間に合わなければ無理せず2回に分割するのもあり…のような気がしました。自分も楽しみながら継続出来たら幸せなので、無理せずじっくり進めていきたいと思います。【池袋の賃貸事務所・賃貸店舗】【看護のエンタメサイト | ナースのHAPPYLAB】
13May
- サイト観察練習044①
  こんにちは。chikaです。サイト観察練習44回目です。どうしても15分でまとめきれず毎回四苦八苦しているのですが、とにかく数を見る、好きなところがどこなのかをはっきりさせる、というのを意識して今回もできるところまでアウトプットしていこうと思います。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------本日観察させていただいたサイト様株式会社デジタルガレージ（Digital Garage, Inc.）国内最大規模の決済プラットフォーム事業を軸に、マーケティング、スタートアップ投資事業、最先端テクノロジーを活用した新規事業を展開。株式会社デジタルガレージ（Digital Garage, Inc.）は、持続可能な社会に向けた「新しいコンテクスト」をデザインし、テクノロジーで社会実装します。www.garage.co.jp今回のサイト様も動画を使われていたりマウスオーバーするととてもよく動いてすごいなぁと見惚れてしまいました。全体のバランスとか余白も整っていて見ていて安心できるところがよいです。個人的に他のサイトでも見かけていたのですが、カーソルが乗った時に電車やバスの行先表示部分のように回転する仕組みがきになったのでちょっとだけ覗かせていただきました。・transform: translate(0px, 0px);のパラメータを変更している…見ているだけだと今の自分には解析しきれないかもしれません。どう変化させて表現しているのだろう。検索してみました。CSSでテキストを1文字ずつ回転させる - QiitaはじめにCSSでは transform: rotate() を使用することで特定の領域を回転させることが可能です。この記事では、 rotate を使用して次のように定義された文字を1文字ずつ回転さ…qiita.comこれは平面で時計回りにぐるぐる回る感じ【初心者必見】要素をくるっと回転！transform:rotate()の全て | 侍エンジニアブログこの記事では「【初心者必見】要素をくるっと回転！transform:rotate()の全て」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。www.sejuku.net色々な回転がありましたが下から文字が出てくるのは見当たらず【CSS animation】CSSだけで作るループアニメーション - Qiitaこれは何CSSだけで、ループアニメーションを作る方法と仕組みについてまとめました。CSSでループアニメーションをする方法を解説する記事はいろいろありますが、それぞれ微妙に内容が違ったり使いたい条…qiita.comanimationではない…かな…流れるように出現（上から下） | 動くWebデザインアイディア帳coco-factory.jpこれともちょっと違う…時間内に見つけることができませんでした。どういう動きという説明が出来れば探しようがあると思うのですが…なんと表現すればよいのか。難しいです。隙間でちょこちょこと探してみたいなと思います。【池袋の賃貸事務所・賃貸店舗】【看護のエンタメサイト | ナースのHAPPYLAB】
09May
- サイト観察練習043
  こんにちは。chikaです。サイト観察練習43回目です。本日は全体を満遍なく見るというよりは、自分の好きなところをグリグリ見る方向で観察していきたいと思います。何がどう今までの観察の仕方と変わるのかは自分でもうまく説明できないのですが、なんとなく構成を見るのではなく、気になった部分をどうしてこうなったのか、どう好きなのかを整理していく…ような感じで進めていこうと考えております。ということで本日も15分でできるところまで。---------------------＜観察目安＞・観察時間は15分・SANKOU！さんの一番新しいサイト・トップページのみ・リンク要素の共通ルールをつかむ（模写する際に見るべきポイント8のうちの１つ）※しばらくポイントは絞らず自由に観察してみます---------------------本日観察させていただいたサイト様KBC創立70周年｜あしたを、もっとユニークに。KBCは2023年8月に創立70周年を迎えました。ユニークをとどけて、70年。KBCグループはこれからも、人と地域をもっと元気にする、ユニークな未来をとどけていきます。kbc.co.jp九州朝日放送さんの70周年記念のサイトだったのですね。放送ということで動画や写真など色々な個所に動きを感じるギミックが詰められていてとてもらしいサイトだなと思いました。個人的にはKモチーフのロゴがまばたきをしていてちょっとほっこりしました。どうやってまばたきさせているのでしょう。気になったのでちょっとだけ覗かせていただきました。・divクラスの::beforeで赤いK部分を画像で配置・目の部分はsvgで作成（htmlタグのellipseは楕円を生成するときに使われる）・animatioで制御している…なるほど。animationを使えば動かせるというのは分かるのですが、cubic-bezierがどういったときに使われるのかが現時点では知識不足でわかりませんでした。いろいろ動かすことができるようになれば楽しそうなのでいつかチャレンジしてみたいですが、順番で行くと同じ動かすならばスライダー部分を作れるようになる方を先にチャレンジしておいた方が頻度的にはよさそうかなと思いました。でも、ワンポイントのロゴがまばたきしていたらやっぱりかわいいと思うのですよね。「ロゴを動かす」という引き出しを増やせたのはよかったかなと思います。そのほかに使われているギミックも気にはなりますが本日はこのあたりにしておきたいと思います。【池袋の賃貸事務所・賃貸店舗】【看護のエンタメサイト | ナースのHAPPYLAB】