Webデザインアーカイブ | すうべにや

ほぼ自分メモ：CSSレイアウト・パーツサイト

雛希 — Wed, 03 Jan 2024 07:24:58 +0000

CSSレイアウト・パーツサイト

フレームワーク使うより、自分で作ったリセットやら大枠やら使いまわしが多いので
個人的には、パーツごとってメチャ有難い。

まあ、フレームワークはそれはそれで便利ですけど。

CSS Layout

昔、あっちゃこっちゃで便利だよーと紹介されてたCSS Layout（https://csslayout.io/）。
レイアウトやパーツが紹介されてて、かつシンプルなすぐに使用可能なコードがコピーできるサイトでしたが、なんか気づいたらなくなってまして・・・。

どうしたもんかとURLを検索したら検索結果にCSS LayoutのGitHubリンクが見つかって、
https://github.com/phuocng/csslayout
そこから、現在閲覧可能なURLにアクセスすることができました。
※自分の環境での検索結果の2番目に、↓のトップへのリンクが出てたんですが、作成者本人のサイトとは思わずスルーしてた

CSS Layout
https://phuoc.ng/collection/css-layout/
前のURLは廃止して、こっちに全部まとめた感ありますね。
ちなみに、トップにあるコレクションやシリーズ一覧もめっちゃ有用そう（すんませんまだ全部みてません）

copypet

なんか前もブログに書いたきがしますが・・・ｗ
こちらも、パーツごとにまとめられてるサイトです。
個人的にはめっちゃくちゃ使ってます、マジ便利。
copypet
https://copypet.jp/

Bing Image Creatorのコレクション

コレクション、ての前からありましたっけ・・・・・・？
なんか「コレクション」クリックしたら
これ知ってたら、作ったので気に入ったのコレクションに入れといたのに・・・ｗ

ほぼ自分メモ：CSSレイアウト・パーツサイトはすうべにやで公開された投稿です。

最近見つけたＷｅｂ関連ネタ

雛希 — Wed, 12 Apr 2017 03:36:25 +0000

めっちゃくちゃお久しぶりの更新です。
忘れていたわけじゃないんですが、取り立ててネタもなく。
SL関連で、マイトレもbento対応したっていうネタはあったはあったんですが・・・。
で、仕事もなんとなく暇になったので、折角なので。

CSS Animation

https://cssanimation.rocks/

日本語対応していますが、日本語だとものすごい記事数少ないので、頑張って英語読むほうが良いです。

CSS Animation Weekly（メルマガ登録）

https://cssanimation.rocks/weekly/
CSSアニメーションテクニックやチュートリアルの解説メールマガジン。
（※英語オンリー、要辞書か翻訳サイトｗ）
登録すれば、過去記事含めすべて閲覧できます。
Codepenへのリンクだったり、他サイトへのリンクだったりとです。
今日時点で#37まで記事が公開されています。
javascript依存のものが多いですが、こんなことまでできるのか！！！って感じで、見ているだけでもかなり楽しいです。

See the Pen First Bite Type R Animation by leoman (@leomanlapera) on CodePen.

とかね。（ローディング画面とかに使えそう）

未だに、@keyframesとかはニガテです。

Codrops

https://tympanus.net/codrops/

Webサイト構築関連の、チュートリアルとかの紹介サイトです。
デザインとかで行き詰ったときの参考にもなると思います。
また、チュートリアルやブループリント（設計図？なんかテストってことですかね）ではデモの閲覧とソースのダウンロードができます。
CSSリファレンスページは、カテゴリごとに可愛くまとめてあって、コレは普通に便利です。

Design Seeds

https://www.design-seeds.com/

色関連で悩んだら・・・。
写真から色を抽出して表示してくれています。
カラースキームなどで組み合わせてもしっくりこない、なんか違うといわれる、独自センスだとやばいことになる
そんな自分みたいな超絶色オンチにはありがたいサイトです。

綺麗な画像が多いので見ているだけでも目の肥やしになって良いですよ。

AutoDraw

画伯に朗報。
https://www.autodraw.com/
適当な線を描いても、もしかしてこれじゃない？っていう図形をすぐさま提示してくれます。
適当な線から絵を構築するには、キラキラ光ってるっぽい鉛筆のアイコンをクリックして、カンバスに絵を描くと上に一覧が出てきて、その中から使いたい図形をクリックするだけで反映されます。

普通に自分の書いた絵も使いたいようであれば、キラキラしてない鉛筆アイコンをクリックで絵を描けば大丈夫です。
テキストの入力もできます。

難点は、自分の欲しい形が無かった場合・・・どうにもならないということですね。

紹介動画

参考元記事
http://jp.techcrunch.com/2017/04/12/20170411googles-autodraw-uses-machine-learning-to-help-you-draw-like-a-pro/

最近見つけたＷｅｂ関連ネタはすうべにやで公開された投稿です。

PhotoShop・Illustrator チュートリアル系サイト

雛希 — Fri, 11 Nov 2016 07:39:28 +0000

先日、フォトショとイラレ、ドリなどのアップデートがあったばっかですが、会社のをまだアップデートしていません、どうもこんにちわ。
フォトショは７ぐらいの頃から使用していて、だいぶ慣れたかなと思ってはいるのですが、アップデートのたびに新機能が実装されてなんじゃこりゃ！
になっていたり（ばばあは、学習速度が遅いのです）、使ったことが無かったけど超ベンリなやり方があったりと、まだまだ覚えることがてんこもりのようです。

イラレは、単体が高すぎて手が届かなかったので、使い始めたのはかなり後になってから。
（フォトショとイラレ両方購入したら20万近く、だったかなあ、と思います）
だもんで、こちらは機能とか、なんかよくわかりませんｗ
ちなみに、当時お子様でしたが、なけなしのお小遣いをはたいて初めて購入したのが確かDreamweaverです。

※一部、まとめとリンクが重複しているかもしれません。

[Photoshop] プロのデザイナーなら1から作る！テクスチャ作成チュートリアル集
色々なチュートリアルをまとめてあります。
パっと見て探したいときに便利。

チュートリアルマニアックス
「Illustrator日本語英語対訳表」がむちゃくちゃ便利・・・・

Photoshop/Illustrator の小技・Tips集
少し情報が古いですが、基本機能は変わっていませんので参考になります。
基本的なことを覚えたあとに、ちょっと応用　という場合は良いかもしれません。

psdbox
書くことがない、有名どころ・・・かもしれません。
プレミアム向けの有料のものと無料のものとあります。

あと、いつまでかわかりませんが、今ならメルマガ？の登録でフォトショップのエフェクトがもらえます。
初心者向けチュートリアルもあります。（グローバルメニューから、beginnersを選択）

Graphic Design & Illustration Tutorials by Envato Tuts+
以前は違う名前だったような気がしたのですが・・・。
envatoのチュートリアルページです。
フォトショ・イラレ以外の3Dやコード系のチュートリアルもあります。

PhotoshopRoadmap
動画でのチュートリアルの紹介。
ものすごく量が多いです。
他に、有料素材の販売も行っているようです。

FX-Ray
サイトがかっこいい・・・。
数は多くありませんが、動画チュートリアルの閲覧と、ファイルのダウンロードができます。

Spoon Graphics
プレミアムメンバーになると、紹介されていたチュートリアルのファイルがDLできるようです。
他に無料素材の配布などもあります。

GFXGuide
チュートリアルの紹介と、フリービー（無料素材）の紹介など。

アップデートしたのはいいけど

なんで、こう、毎回、インターフェイスガラリとかえてきますかねｗ

ボタンの配置とかぜえええんぶ変わってた。（↑は元に近い配置にしてますが）
あと、コード部分少しアニメーションチックになってましたが、余計な機・・・げふんげふん。
新規作成が、見慣れた画面になってなくて「なんじゃこれ！！」でした。

イラレも新規ファイル画面が完全に「なんじゃこりゃ！！」

と思ったら上のタブで色々とデバイス・印刷物ごとに選択するようです。
（ちなみにフォトショもこんなかんじ）
このアップデートで一番、これはスバラシイ！とおもったのは、無料のテンプレートがDLできるところですかね。

PhotoShop・Illustrator チュートリアル系サイトはすうべにやで公開された投稿です。

Canva Design Schoolが個人的にものすごく役に立ったので

雛希 — Tue, 08 Nov 2016 09:58:48 +0000

CanvaのDesign Schoolが個人的にメチャクチャ役に立ったので。
ちなみにCanvaは、ブラウザ上で簡単に色々デザインできちゃう便利ツールです。
（カードとかフライヤーとかバナーとか）
Canva内でのことに限らず、他のことでも普通に応用できそうな記事がたくさんあります。

元々は、色決めるのにものすご～～～～～く悩んで見つけたところです。

例えば

【デザイン力を上げる、10のTIPS（意訳！間違ってるかも！）】
この記事とか。
デザインの考え方というかヒントというか。
他にもノンデザイナー向けの記事で
「50 Design Terms Explained Simply For Non-Designers」というページでは
普段触れている人以外には全くなじみの無い
タイポグラフィーや文字のカーニング、ロゴタイプ、グリッドのこと等について説明しています。
（※項目イッパイあるので抜粋）

Design School

ちなみに、Canvaはこちら
Canva
※日本語はサポートしていません。

テンプレートが豊富にあるので、全くわからなくてもイイカンジのものができるのがいいですね。
フォトエディタなども用意されています。
冗談抜きで英語できないので、使用したことがないのですが、一部無料で一部有料？だったと思います。
ipad用のアプリもあるようです。

どおっでもいいけど、色カンケイのセンス上げるには色彩検定みたいなの受けないとだめなんですかね（トオイメ）
ほんと深夜テンションの組み合わせしかできない、昼間でも・・・。
ダメダメなので、基本ベースカラー決めたらなるべく3色以内に押さえるのと、カラースキームジェネレーターなどを駆使して（でもなんかおかしい）います。
色々とお約束はあるようですが、センスある人はそんなもの駆使しなくてもパパパっと色決められてうらやましいです。

Canva Design Schoolが個人的にものすごく役に立ったのではすうべにやで公開された投稿です。

Webデザイン アーカイブ | すうべにや