STUDIO Workshop#3 @ OHAKO
https://gyazo.com/debacc44fb1a7c0e9842e48787f9ed41
N35.6894126,E139.6825556,Z18 (株)オハコ(OHAKO,+Inc.)
Yutaka(STUDIO代表)
Keima(STUDIO CPO)
Maaya (動画作成、マーケティング担当)
パキスタン+日本のハーフ
yamanoku.icon まさかいるとは思わなんだ。お話ありがとうございました〜
コミュニティ
コンセプト
デザインと開発を1つにした、次世代のWebデザインプラットフォーム
ユーザー2万
海外ユーザー 50%
Product Hunt
2017年 1位受賞
作成事例
昨今のWebサイト作成ツールは煩雑になっている
シンプルにできるようにしたい
コードを書かなくていい
デザインもよいものを使えるように
レイアウト
既存のデザインツールは好きなものを好きなところにおける
積木構造
親子構造関係
ボックスの中にボックスを入れていく
ワークショップ
https://gyazo.com/e68efedb395c9bf202dc8c35674418e2
https://gyazo.com/453a2deb642326a66b0ffe711ce24d53
https://gyazo.com/52d89f7be7f035e22e0c3f23ef2edfca
左右ホバーでツールがでてくる
https://gyazo.com/0177591361af84046959cd0368b07ece
ボックス選択
https://gyazo.com/08a235d6cc6cf5f338d2f691f9a5319e
画像配置
ドラッグして一回待つのがコツらしい
ダブルクリックで画像選択ツールがでるので何か選ぶと適応
https://gyazo.com/ab0ff121058f87064d0842e0aad2d6b9
https://gyazo.com/f5f3823e04b767a7fc9a3208d1e8203b
marginとpadding設定
https://gyazo.com/81692290e44b84a3ce91ba14cbd8905c
ボックス選択後ならここからでも変更できる
https://gyazo.com/9356f4677b6b2371970299ac2ab3bcbc
高さをauto設定できる
レスポンシブにするときに幅や高さがpx固定だとコンテンツが可変にならない
https://gyazo.com/f48f66ee83f12308779abd1bfe1a1161
画像の明暗
https://gyazo.com/fbe95d033d7fc7b6f4ecee825703be2b
ボックスの配置位置も変更できる
縦
横
https://gyazo.com/48982ce6652e5e07818627adf5fcb1c6
タグ変えられる
https://gyazo.com/0b66a3250bc95ca2c0b031004dd66ae2
内部配置の間隔調整?
justify-contentっぽい
https://gyazo.com/41009f54db1853da4dfd3b29fce6a45e
反復でコピペしておける
ボックス単体の大きさも%で指定できる
囲みボックス上左で間隔調整てきる?
https://gyazo.com/0498f9b37ac1c544e57c998f70853f43
Cmd + Shift + Dでデバックモード
https://gyazo.com/a075ca7bc4f4db4532c5ba5669996423
iframeの種類
https://gyazo.com/00144372346c85c0de5b9e2088692166
Live Share機能
URLで共有できる
修正したのはプレビューのほうで反映される
https://gyazo.com/3cf116c5c03fc2778c0dfc16854d824a
https://gyazo.com/f79dd586b6c8fefc7fddaca9e273db62
レスポンシブモード
幅を調整でタブレット、スマホ時に確認できる
このときにコンテンツの幅を独自に設定できる
小さいときにデザインするよりも
大きいときにデザインしてみたほうが調整しやすい
サブドメインでの公開は無料(バナーつき・アナリティクス制限あり)
https://gyazo.com/5b717f7690351eb9673fe8726a664752
https://gyazo.com/b12f1f10cf9bb3f739b0f5adf25e45ab
ヒントツール
動画で紹介してくれる
チャットもできる
そのほかTips
ヘッダ固定、モーダル、フォームなどのパーツが新規で追加された
モーダルを使うとハンバーガーメニューのそれがつくれる
https://gyazo.com/394b35155c2dc6ab67c2cd0e56aa0024
https://gyazo.com/e17cfefbc776341f0f936010c5aac5bf
個人的にはfavicon入れられるのが感動した
有料だと独自ドメインのSSL化もある
yamanoku.icon 感想
直感的ではあるが、きちんとWebの文脈になぞらえて設置してくれるようになっていた
要素の次に要素がやってくる
ボックス内の親子関係とか
ボックスレイアウトの概念、思想がきちんとプロダクトに生きてると思った
コピーアンドペーストが使えたりショートカットキーが使えるので、通常のデザインツール同様慣れてきたら使い勝手が良くなる感じ
さすがにWeb従事者でショートカットキーを知らないのはないが
一見してわかる場所にショートカットヘルプがあったらいいような気はした
デバッグモードとかは聞かなかったらわからんかったし
これは上級者向けではあるが
STUDIOに限らずエンジニアじゃない人がWeb構造を理解しなくてもきちんと整えてくれたり、融通を利かす大変さらへんを操作を通して教えてくれるのは良いなと思った
チュートリアルを通じて、良くも悪くも「海外寄りの」Webデザインになるなと思った
そういうデザインのものを作りたいならいいけど
日本のWebデザインは世界的に見ても特質なサイト作りになってるので
同じように当てはめるのは難しいような気はした
海外ユーザーがアクティブユーザーの半分ってのもそういうのが効いてるからこそ、な気はする
もちろんそうならないようにはできると思うけど
チュートリアルをやった人間は難しそうな気はした
ヘルプ動画でコツみたいなのはあるんだろうか
エンジニア視点ではきちんとレスポンシブできるようにスタイルが揃ってたので良かった
最初div…と思ったがタグが変更できるので少し安心した
画像が疑似要素なのが気になった
https://gyazo.com/641607f6c3820b103e95afb29e7734be
代替テキスト入れられるんだろか
個人的には中身がどう表示されているのかを改めて見たいと思った
サイトリニューアルなどに使うよりかはペラ1などのLP向きなのかもしれない
コードを書いたりアレコレ細かいことをやりたい欲はありそう
https://gyazo.com/0bd317c8b86d9a488a5da360adaf63c8
料金体系は$換算なので変動はあるが、割と良心的ではないかと感じた
https://gyazo.com/f63874d1d87faaab10276d0f5935b843
CMS機能がきになる
中の人も言ってたけどドラッグアンドドロップの挙動がイマイチなところはあった
画像を中に配置するのであれば一度待たなければならない
一度テキストを配置したら内部でドラッグしないと再配置してくれない
今後の改善に期待
改善後はv2.0.0をリリース予定?
内部的なところだと最新のを使っているみたいでバージョンによる負債はなさそうで安心した
当初は1だったそうな…
あんまり気にしてない
それよりFigmaやXDのよりデザイン寄りのツールが気になるし参考になってる ワークショップは司会の進行が早く、1つの動作を確認し終える前に次の動作に行ってたのでもう少しゆっくりやってほしかった
時間も余ったみたいだし
ピザと呑み物ごっそさんでした